Question

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

   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中为空，但是当我以render（）函数的形式显示Array的元素时，它将显示所有正确添加的值。这怎么可能？我该如何解决？

Answer 1

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

Answer 2

状态更新本质上是异步的。如果要在类组件中设置状态后立即打印状态，则将函数传递给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

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

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

DOCUMENTATION将有助于理解该概念

此外，console.log不会直接给出更新的状态，因为状态更新是分批的。您可以使用回调方法设置状态函数。回调仅在状态值成功更新后才能运行

ArrayDidMount中数组的状态未更新

3 个答案: