React JS 如何在数组中显示 JSON 数组

Question

我有一个 MongoDB 查询 returns JSON 如下所示：

   
      {
        _id: 'New List',
        listItems: [
          {
            _id: '5b86ef7dfb6fc03893e56a54',
            name: 'Coffee',
            quantity: '5',
            listName: 'New List',
            urgency: 'High'
          }
        ]
      },
      {
        _id: 'My List',
        listItems: [
          {
            _id: '5b8552ed32f03600146b82e5',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'Tea bags',
            date: '2018-08-28T13:49:33.615Z',
            __v: 0
          },
          {
            _id: '5b855b9e3fcbc00014a11a4d',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'Cold Sore Medicine',
            date: '2018-08-28T14:26:38.705Z',
            __v: 0
          },
          {
            _id: '5b85b5daec7c4008f4294977',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'School Bag(Satchel)',
            date: '2018-08-28T20:51:38.993Z',
            __v: 0
          },
          {
            _id: '5b85b6246c915f0014dfa961',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'School Uniform',
            date: '2018-08-28T20:52:52.227Z',
            __v: 0
          }
        ]
      }

我正在尝试使用 reactstrap 在列表组元素内使用 react 来显示它。查询按 "listName" 分组，我想显示按 listName 组织的列表。

下面的代码似乎不起作用。

render() {

        const { items } = this.props.item;
        if (items) console.log("items: " + items.toString())

        return (

            <Container>
                <ListGroup>
                    <TransitionGroup className="shopping-list">
                        {items.map(({ listItems }) => (


                            <ListGroupItem>
                                {listItems}
                            </ListGroupItem>

                        listItems.map((eachThing) =>
                                <ListGroupItem>
                                    {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
                                </ListGroupItem>
                            )))}
                    </TransitionGroup>
                </ListGroup>
            </Container>
        )
    }

下面是编译代码的错误：

Syntax error: Unexpected token, expected , (34:0)
[1]
[1]   32 |                                 </ListGroupItem>
[1]   33 |
[1] > 34 | listItems.map((eachThing) =>
[1]      | ^
[1]   35 |                                 <ListGroupItem>
[1]   36 |                                     {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
[1]   37 |                                 </ListGroupItem>

如有任何帮助，我们将不胜感激。

Answer 1

您正在 JSX 组件中混合原始 JavaScript。您必须将 listItems.map(...) 括在大括号中才能计算表达式。此外，React 组件应该有一个根。尝试将渲染函数更新为：

render() {
  const { items } = this.props.item;
  if (items) console.log("items: " + items.toString())

  return (
    <Container>
      <TransitionGroup className="shopping-list">
        {items.map(({ listItems }) => (
          <React.Fragment>
            <ListGroupItem>
              {listItems}
            </ListGroupItem>

            {listItems.map((eachThing) =>
              <ListGroupItem>
                {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
              </ListGroupItem>
            )}
          </React.Fragment>
        ))}
      </TransitionGroup>
    </Container>
  )
}

Answer 2

有了@charlietfl 的评论并根据您要实现的目标进行了一些编辑，您的整个代码应该是

render() {

    const { items } = this.props.item;
    if (items) console.log("items: " + items.toString())

    return (

        <Container>
            <ListGroup>
                <TransitionGroup className="shopping-list">
                    {items.map(({ listItems }) => (
                        <ListGroupItem>
                            {listItems.map((eachThing) =>
                                <ListGroupItem>
                                    {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
                                </ListGroupItem>
                            )}
                        </ListGroupItem>
                    ))}
                </TransitionGroup>
            </ListGroup>
        </Container>
    )
}

React JS 如何在数组中显示 JSON 数组

React JS how to display JSON with arrays inside array

javascript

json

jsx

reactjs

reactstrap