Question

我正在自学如何在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，则该值将下降。

我在提取过程中缺少步骤了吗？好像它跳过了获取后尝试设置状态的步骤。谢谢。

Answer 1

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

如果您需要在调用setState之后立即访问状态，则将代码放入回调中，并将此回调作为setState的第二个参数传递，例如：

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

为什么React Fetch会忽略我得到的JSON数据？

1 个答案: