Как мне установить массив объектов в React? - PullRequest
Новая
       4

Как мне установить массив объектов в React?

0 голосов
/ 22 апреля 2020

Итак, я делаю SQL запрос в моем бэкэнде узла / express и отправляю результат в мой интерфейс React через JSON. Я console.log, чтобы увидеть, какую информацию я посылаю, и это, кажется, в порядке. Тем не менее, я не могу понять, как установить этот массив объектов в мое состояние. Я получаю эту ошибку:

"Объекты недопустимы в качестве дочерних элементов React (найдено: объект с ключами {Title}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив."

Вот компонент, с которым я работаю: 

import React, { Component } from 'react'

export class ShoppingCart extends Component {
    state = {
       cartItems: ['Title 1']
    };


      displayCart = () => {

          console.log('call it')
          console.log('hello from displaycart');
          fetch('http://localhost:5000/fillCart')
          .then((res) => res.json())

          .then((json) => {
              this.setState(state => {
                  const cartItems = state.cartItems.concat(json.Title);
                  return {
                      cartItems
                  };
              });
          })
      }

      componentDidMount() {
          this.displayCart();
      }

    render() {

        return (
            <div className="ShoppingCart">

                <h3>This is your shopping cart</h3>
                <ul>
                    {this.state.cartItems.map(item => (
                        <li key={item}>{item}</li>
                    ))}
                </ul>

            </div>
        )
    }
}

export default ShoppingCart

Моя цель состоит в том, чтобы установить json .Title (прямо сейчас содержащий несколько заголовков) в массив cartItems State, который у меня есть в мое состояние, а затем отобразить каждый заголовок через render () в списке. Однако я застрял в том, как это сделать sh.

Кроме того, вот как выглядят данные json, которые я отправляю из бэкэнда Node / express: 

[
  RowDataPacket { Title: 'The Tragedy of The Korosko' },
  RowDataPacket { Title: 'Two in the Far North' }
]

Чтобы уточнить, на данный момент моя проблема не в том, чтобы отобразить информацию, а в том, чтобы сначала установить ее в состояние. Любые предложения обязательно будут оценены! Я застрял на этом в течение нескольких дней. Заранее спасибо !!!

Ответы [ 3 ]

0 голосов
/ 22 апреля 2020

Вам нужно извлечь все заголовки из ответа json.

Вот как выглядит формат ответа: 

{
  Title: [{Title: ''}, {Title: ''}]
}

Ваш верхний уровень json.Title представляет собой массив с objects.
Таким образом, свойство .Title не существует в json.Title, но в каждом из объектов внутри массива.

Мы можем использовать map , чтобы извлечь то, что нам нужно.

Ваш setState может выглядеть примерно так: 

this.setState(state => {
    // All titles in an array
    const titles = json.Title.map(row => row.Title)

    // Add to existing ones
    const cartItems = state.cartItems.concat(titles);

    return {
        cartItems
    };
});
0 голосов
/ 22 апреля 2020

У Оскара Хейна был довольно близкий ответ. Вот его ответ с небольшой модификацией: 

.then((json) => {
              this.setState(state => {
                  const titles = json.Title.map(row => row.Title)
                  const cartItems = state.cartItems.concat(titles);
                  return {
                      cartItems
                  };
              });
          })
      }

Изменение в json .Title.map. Необходимо отобразить через массив; однако json .map не отображается через массив, поскольку json не является массивом. json. Название - это массив.

0 голосов
/ 22 апреля 2020

Использовать Распределение массива с текущим состоянием и JSON в ответ. Код будет выглядеть так: 

displayCart = () => {
  fetch('http://localhost:5000/fillCart')
  .then((res) => res.json())
  .then(json => {
    const newItemsArry = json.map(itm=> itm.Titles)
    this.setState({cartItems: [...this.state.cartItems, newItemsArry]}))
  }
}
...