Функция React Объекты недопустимы как дочерний элемент React - PullRequest
Новая
       3

Функция React Объекты недопустимы как дочерний элемент React

0 голосов
/ 05 марта 2020

Я начинаю реагировать, и у меня есть пара сомнений. У меня есть функция (addProductInventroy), которая срабатывает после щелчка. То, что вы пытаетесь сделать, это:

  1. Pu sh в массиве идентификатор продукта, по которому щелкнули
  2. Создать список со всеми продуктами в массив и вызвать getProduct, чтобы вернуть имя и описание продукта API остальных, через ax ios.

При этом система выдает мне следующую ошибку:

Ошибка: объекты недопустимы как дочерний элемент React (найдено: [обещание объекта]). Если вы намеревались представлять коллекцию дочерних элементов, используйте вместо этого массив.

Первый вопрос - , как решить проблему , а второй - посмотреть, если есть еще один способ не сохранять список в состоянии. 

addProductINventroy = async e => {

        this.state.inventory.push(e.target.value);
        this.setState(
            {inventroyhtml:this.state.inventory.map((item, key) =>
            <li key={item}>{item} 
            {this.getProduct(item).name}
            </li> )

        })

    }


getProduct = async id => {

            const product = await axios.get('http://localhost:4000/api/products/'+id);
            return {product}


    }

1 Ответ

0 голосов
/ 06 марта 2020

Я незнаком с Топором ios, поэтому не совсем уверен, как им пользоваться. Я вижу некоторые проблемы с другой функцией.

this.state.inventory.push(e.target.value); изменяет состояние напрямую. Это плохая идея. Вы можете прочитать почему здесь: https://daveceddia.com/why-not-modify-react-state-directly/. Обычно при обновлении состояния всегда используйте setState().

Во-вторых, я бы не рекомендовал переводить компоненты React в ваше состояние. Вам не нужно этого делать, поскольку у вас уже есть значения идентификаторов продуктов в вашем штате (насколько я могу судить по крайней мере). Вот пример того, как реализовать вашу логику c: 

addProductINventroy = async e => {
    // Get your API output here, it appears that Axios already 
    // conveniently turns your response into a javascript object:
    const newProduct = await getProduct(e.target.value);

    // Add your product to the inventory state object
    this.setState(inventory: [...inventory, newProduct])
}

render() {
    return this.state.inventory.map((item, index) =>
        <li key={index}>
            {item.name}
        </li> )
    })
}

Обратите внимание, что я использую здесь оператор расширения ES6 , чтобы объединить идентификатор с существующим массивом. Это создает новый массив и не изменяет старый.

Я также реализовал метод render(), вы не показывали ту часть, где вы визуализируете объекты. Это пример того, как получить доступ к объекту состояния при рендеринге.

Обратите внимание, что в моей реализации объект состояния inventory содержит все продукты в формате JSON. Если вам нужно использовать объект inventory для идентификаторов где-то еще, вам следует дать ему другое имя.

...