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在listgroup元素内使用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>
    )
}

Answer 2

您在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>
  )
}