为什么 React fetch 忽略了我得到的 JSON 数据？答案

【问题标题】：Why is React fetch ignoring the JSON data I'm getting?为什么 React fetch 忽略了我得到的 JSON 数据？
【发布时间】：2019-06-07 20:31:58
【问题描述】：

我正在自学如何在 React 中“获取”数据。但是，虽然我能够从本地文件中获取 JSON 数据，但当我尝试将其放入组件的状态时，它会以某种方式消失。

我正在使用以下教程。我要复制的确切代码是此链接的第二张图片：

https://www.robinwieruch.de/react-fetching-data/#react-how-fetch-data

例如，以下代码在日志中返回正确的数据：

constructor(props) {
  super(props);
  this.state = { cardData: [] };
}

componentDidMount() {
   fetch(cardDataJsonLocation)
    .then(response => response.json())
    .then(data => console.log(data.cardData));
}

当我在浏览器中查看控制台时，正在记录正确的数据 - 一个包含 2 个对象的数组：


[{…}, {…}] 0: {name: "dom", id: 1} 1: {name: "dave", id: 2}
length: 2 __proto__: Array(0)

但是，当我更改上面的代码以实际将上面的数组数据置于我的组件状态时：

componentDidMount() {
fetch(cardDataJsonLocation)
  .then(response => response.json())
  .then(data => this.setState({ cardData: data.cardData }))
  .then(console.log(this.state));
}

当我记录状态时，与我在构造函数中设置的原始状态没有任何变化。

在这种情况下，它记录一个空数组。如果我将状态（在构造函数中）设置为，例如 [1,2,3] 或 null，那么该值会下降。

我是否错过了获取过程中的一个步骤？就好像它跳过了我在获取后尝试设置状态的步骤。谢谢。

【问题讨论】：

.then(console.log(this.state)); 缺少() =>
常见的 setState 误解 - 异步性质 - 阅读文档 - 对此有一个特殊警告
this.setState({ cardData: data.cardData }, () => { console.log(this.state); })

标签： javascript reactjs

【解决方案1】：

正如其他人所指出的以及documentation 中所述，setState() 是一种异步方法。

如果你需要在调用 setState 后立即访问状态，那么将你的代码放入一个回调中，并将这个回调作为 setState 的第二个参数传递，如：

this.setState({ cardData: data.cardData }, () => { console.log(this.state); })

【讨论】：

是的 - 谢谢。我什至没有想过要搜索文档来查看 setState 是否是异步的。