State 的数组未在 ComponentDidMount 中更新

Question

我有一个奇怪的情况，我有一个数组作为 state: this.state = { ActivityItem: []}我正在从调用 ZDB974238714CA8DE634A7CE1D083A1 的库中向它推送值：

   getDataFromKit(dateFrom) {


                Kit.getSamples(stepCountSample, (err, results) => { //api call
                if (err) {
                    return;
                }
                const newData = results.map(item => { return { ...item, name: 'itemAmount' } });
                this.setState({ d: [...this.state.ActivityItem, ...newData] })

            })

然后，我从 ComponentDidMount() 调用此方法以加载要加载的数组

  componentDidMount() {
     this.getDataFromHealthKit(ONEDAYINTERVAL);
    console.log("values are", this.state.ActivityItem)
}

现在，最奇怪的部分：不知何故，ComponentDidMount 中的数组为空，但是当我显示 Array 的元素以返回 render() function 时，它会显示所有正确添加的值。 这怎么可能，我该如何解决？

Answer 1

setState 本质上是异步的。 因此，在设置后立即记录 state 可以提供此行为，但如果设置正确，它将显示您的情况所需的内容。 此外，componentDidMount 在开始时仅调用一次，因此您可以在 componentDidUpdate 方法中检查日志。

Answer 2

State 更新本质上是异步的。 If you want to print the state soon after setting your state in class component, then pass a function to the 2nd argument of setState .

像这样

componentDidMount() {
  this.getDataFromHealthKit(ONEDAYINTERVAL);
  // remove console.log   
}
...


getDataFromKit(dateFrom) {
    ...
   this.setState({ ActivityItem: [...this.state.ActivityItem, ...newData] }), () => {
    console.log("values are", this.state.ActivityItem) //<---- 
   }
})
 ...
}

Answer 3

在更新 state 值时使用prevstate 。 React setState 是一个异步更新，并进行批量更新。 使用prevState确保在计算新的 state 值之前更新 state 值。

getDataFromKit(dateFrom) {
    let stepCountSample = {
      startDate: dateFrom.toISOString(),
      type: "Type1"
    };

    Kit.getSamples(stepCountSample, (err, results) => {
      //api call
      if (err) {
        return;
      }
      const newData = results.map(item => {
        return { ...item, name: "itemAmount" };
      });
      this.setState(prevState => {
        ActivityItem: [...prevState.ActivityItem, ...newData];
      });
    });
  }

文档将有助于理解这个概念

此外， console.log不会直接给出更新的 state，因为 state 更新是批处理的。 您可以使用回调方法来设置状态 function。 只有在成功更新 state 值后，回调才会运行