0

我有一个奇怪的情况，我有一个数组作为状态： 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 中的数组是空的，但是当我显示 Array 的元素以返回 render() 函数时，它会显示所有正确添加的值。这怎么可能，我该如何解决？

4

3 回答 3

0

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

于 2020-05-02T06:19:43.303 回答
0

状态更新本质上是异步的。如果您想在类组件中设置状态后立即打印状态，则将函数传递给setState.

像这样

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


getDataFromKit(dateFrom) {
    ...
   this.setState({ ActivityItem: [...this.state.ActivityItem, ...newData] }), () => {
    console.log("values are", this.state.ActivityItem) //<---- 
   }
})
 ...
}
于 2020-05-02T06:29:09.483 回答
0

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

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

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

于 2020-05-02T06:29:27.457 回答