Реагируйте JS, как отобразить JSON с массивами внутри массива - PullRequest
Новая
       33

Реагируйте JS, как отобразить JSON с массивами внутри массива

0 голосов
/ 30 августа 2018

У меня есть запрос 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
          }
        ]
      }

Я пытаюсь отобразить его с помощью реакции в элементе группы списков, используя реагирующий ремешок. Запрос сгруппирован по «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>

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

С комментарием @ 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>
    )
}
0 голосов
/ 30 августа 2018

Вы смешиваете необработанный JavaScript в своем компоненте JSX. Вы должны обернуть 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>
  )
}
...