Question

使用 React 和 Express 从服务器解析 JSON - “TypeError：无法读取未定义的属性”

2020-04-03

52

javascript json reactjs express

我在客户端代码中解析从服务器返回的 JSON 时遇到了问题。如果我向我的 mongoDB 服务器发送一个基本请求：

GET http://localhost:4000/food/

我得到了以下响应，这显然是一个对象数组。

在我的客户端中，我在构造函数中定义了一个状态：

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); 
}

此函数使用服务器输出填充文件状态中的 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)) ，我会收到错误 TypeError: Cannot read property 'name' of undefined 。

我已经在这个问题上挣扎了一段时间了——我不明白为什么客户端认为 foodList 是未定义的，而你可以从之前的测试中看到它不是未定义的，并且它是 JSON 格式。

顺便说一句，如果它很重要，我会从 render() 方法内部调用 console.log() ，但在 return() 值之前。

我对 React 框架和整个 JS 都很陌生，所以任何帮助都会很感激 :)

Answer 1

因此，在 React 中需要注意的一件好事是状态更改是异步发生的。另一件需要注意的好事是，chrome 喜欢使用控制台日志，并会显示当前而不是当时的值。这里的主要问题（基于您所写的内容，因为我们没有代码可看）是，如果您拥有的控制台日志在数据调用返回之前运行，那么 foodList 数组中将没有任何数据，因此 this.state.foodList[0] ===undefined 并且您无法访问未定义的属性。在 React 中，如果您想在控制台记录状态更改，一个不错的选择是使用 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 react app 版本中受支持）：

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

Answer 2

您尝试 console.log 在数组中使用来自服务器的数据填充阵列之前的第一个元素（因为Ajax调用需要一些Tome来执行），因此将其定位为0 。