javascript - React JS如何显示数组内包含数组的JSON

Question

我有一个 MongoDB 查询，它返回 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

通过 @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>
    )
}