Состояние пусто после анализа данных к нему

Question

Я пытаюсь получить данные из моего локального файла JSON. Получение данных не дает ошибок, и все возвращается правильно в журнале консоли. Когда я пытаюсь установить эти данные в состояние, это работает, если я анализирую json, а не json.data. json.data ничего не делает, но json работает, только если я использую функцию map, это дает мне кучу ошибок

Код:

getData = () => {
        fetch('http://localhost:3000/ingredients.json')
            .then(response => {
                if (response.ok) {
                    return response;
                } else {
                    let response = `${response.statusText}`
                    let errorMessage = `${response.status(response)}`
                    let error = new Error(errorMessage)
                    throw (error)
                }
            })
            .then(response => response.json())
            .then(json => {
                console.log(json);
                this.setState({ data: json })
                console.log(this.state)
            });
    }

    render() {
        return (
            <div>
                {
                    this.state.data &&
                    this.state.data.map((key, display, nutrition) =>
                        <div key={key}>
                            {display}
                            {nutrition}
                        </div>
                    )}
            </div>
        )
    }

Вот моя ошибка:

Objects are not valid as a React child (found: object with keys {key, display, unity, category, nutrition, vitamins}). If you meant to render a collection of children, use an array instead.

Answer 1

Если ваши данные не являются массивом, не используйте функцию карты. Измените свой код, как показано ниже:

 render() {
        return (
            <div>
                {
                    this.state.data &&
                        <div key={this.state.data.key}>
                            {this.state.data.display}
                            {this.state.data.nutrition}
                        </div>
                }
            </div>
        )
    }

Answer 2

Функция map для Array.prototype принимает функцию обратного вызова с аргументами, (value, index) => {}. Если вы планируете уничтожить, используйте вместо этого

this.state.data.map({key, display, nutrition, ...rest}, index) => { // index of value in this.sta
 <div key={key}>
   {display} //I am assuming this is a string not a object or array
   {nutrition} // this should be a string 
 </div>
}

Редактировать : Я предполагаю, что data похоже на

data: [
 {
   key: "",
   nutrition: "",
   display: ""
 }, 
 {
   key: "",
   nutrition: "",
   display: ""
 } 
]

Редактировать 2 :

Учитывая это

state {
data = 
 [
    { id: 1, 
        display: 'Pommes', 
        unity: [ 'unités' ], 
        category: [ 'fruits' ], 
        nutrition: 95, 
        vitamins: [ 'C', 'B-6' ] 
    },
    {
        id: 2,
        display: 'Poires',
        unity: [ 'unités' ],
        category: [ 'fruits' ],
        nutrition: 95,
        vitamins: [ 'C', 'B', 'E' ]
    }
];
}

Вот как это отобразить:

render() {
   return (
     <>
      {
       this.state.data && this.state.data.map(({id, display, nutrition, vitamins}) => {
          return (
           <div key={id}>
            {display} 
            {nutrition}
            {<>vitamins.map(v => v) </>} //in case you need thing such as vitamis, Array, also to eppear
          </div>
        )})
      }
     </>

   )
}