Синтаксический анализ JSON с сервера с использованием React и Express - «TypeError: Невозможно прочитать свойство '' неопределенного»

Question

У меня проблемы с синтаксическим анализом JSON, возвращенного с моего сервера, в моем клиентском коде. Если я отправлю запрос basi c на мой сервер mongoDB:

GET http://localhost:4000/food/

, я получу следующий ответ, , который, очевидно, является массивом объектов.

In мой клиент, у меня есть состояние, определенное в конструкторе:

this.state = {
 index: 0,
 foodList: []
};

И функция callServer, которая вызывается при загрузке страницы с использованием componentWillMount():

callServer() {
 fetch("http://localhost:4000/food/")
  .then(res => res.json())
  .then(res => this.setState({ foodList: res }))
  .catch(err => err); 
}

This функция заполняет foodList в состоянии файлов выходными данными сервера - когда я запускаю console.log("debug:\n" + JSON.stringify(this.statefoodList[0])), вывод будет

Debug:
{"registerDate":"2020-04-01T14:34:04.834Z","_id":"5e66437d59a13ac97c95e9b9","image":"IMAGE","name":"Example 2","address":"BI1 111","type":"ExampleType1","price":"£Example Price","link":"example.com"}

, который показывает, что foodList правильно настроен для вывода с сервера.

Проблема в том, что если я выполню console.log("debug:\n" + JSON.stringify(this.state.foodList[0].name)) Я получу ошибку Ошибка типа: не могу прочитать свойство 'имя' из неопределенного .

Я боролся с этим на какое-то время проблема - я не понимаю, почему клиент считает, что foodList не определен, когда из предыдущего тестирования видно, что он не является неопределенным, и он имеет формат JSON.

В качестве стороны обратите внимание, если это важно, я вызываю console.log() изнутри метода render(), но до значения return().

Я очень плохо знаком с каркасом React и JS в целом , поэтому любая помощь будет оценена :) 1033 *

Answer 1

Итак, хорошо бы отметить, что при реагировании изменения состояния происходят асинхронно. Еще одна хорошая вещь, которую стоит отметить, это то, что chrome любит помогать с журналами консоли и будет показывать то, что значения оценивают в настоящее время, а не в то время. Основная проблема здесь (основываясь на том, что вы написали, поскольку у нас нет кода для просмотра), заключается в том, что если ваш журнал консоли запускается до возврата вызова данных, то в * 1001 не будет никаких данных. * массив, поэтому this.state.foodList[0] ===undefined, и вы не можете получить доступ к свойству undefined. В реакции, если вы хотите, чтобы консоль регистрировала изменение состояния, хорошим вариантом является использование второго параметра обратного вызова метода setState. Это гарантированно будет работать после изменения состояния.

callServer() {
 fetch("http://localhost:4000/food/")
  .then(res => res.json())
  .then(res => this.setState({ foodList: res },()=>console.log(this.state.foodList[0].name))
  .catch(err => err); 
}

Если вы хотите сохранить console.log в функции рендеринга, вы можете либо проверить, действительно ли массив заполнен, либо использовать новый опциональный оператор цепочки (который поддерживается в последних версиях приложения create activ):

console.log("debug:\n" + JSON.stringify(this.statefoodList[0]?.name))

Answer 2

Вы пытаетесь console.log первый элемент массива до того, как массив будет заполнен данными с вашего сервера (так как вызов ajax требует некоторого времени для выполнения), поэтому позиция 0 этого this.state.foodList равна все еще не определено.

Вы можете это исправить, сначала проверив, имеет ли массив длину, подобную этой

console.log(this.state.foodList.length && "debug:\n" + JSON.stringify(this.state.foodList[0].name))