Reactjs 为什么此.state中的数组上的concat不工作？

我试图在位于组件状态的数组中的键日期下添加渲染日期，但它始终返回0

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

  componentWillMount() {
    this.renderDateComp()
  }

  renderDateComp() {
    for(var i = 0; i < 5; i++) {
      var dat = new Date(Date().valueOf());
      dat.setDate(dat.getDate() + i);
      this.setState({ dates: this.state.dates.concat(dat) });
      console.log(this.state.dates); //prints length of 0
    }
  }

---

首先，状态转换不是即时的，在大多数情况下是异步的。想象一下，每次设置状态时，它都会将状态更改添加到一个更改队列中，并且React会持续处理该队列，执行所有这些状态更改。因此，如果更改状态，那么在下一行代码中立即打印状态，状态可能不会更改，因为console.log发生在状态更改添加到列表之后，但在更改实际通过该队列之前

---

其次，最好在for循环之后设置状态，因此只需设置一次，而不是5次。

首先，状态转换不是即时的，在大多数情况下是异步的。想象一下，每次设置状态时，它都会将状态更改添加到一个更改队列中，并且React会持续处理该队列，执行所有这些状态更改。因此，如果更改状态，那么在下一行代码中立即打印状态，状态可能不会更改，因为console.log发生在状态更改添加到列表之后，但在更改实际通过该队列之前

---

其次，在for循环之后设置状态可能更好，因此只需设置一次，而不是5次。

值得阅读setState的文档

它将对更改进行排队，但如果您想以某种方式使用新值，则会有一个回调版本

this.setState((prevState, props) => {
  return {myInteger: prevState.myInteger + props.step};
});

---

值得阅读setState的文档

它将对更改进行排队，但如果您想以某种方式使用新值，则会有一个回调版本

this.setState((prevState, props) => {
  return {myInteger: prevState.myInteger + props.step};
});

---

更具体地说，如果您这样做：

this.setState({ dates: this.state.dates.concat(dat) }, () => console.log(this.state.dates));

---

您将得到预期的结果。

更具体地说，如果您这样做：

this.setState({ dates: this.state.dates.concat(dat) }, () => console.log(this.state.dates));

---

您将获得预期的结果。

建议的方法是：

在获得最终日期数组后，仅调用setState一次。 将this.state.dates记录在setState的回调中。只有在React正确更新this.state之后，才会调用它。 这里需要注意的关键点是setState是异步的。您可能不需要在实际代码中对数组进行console.log

阅读更多关于setState的信息

---

建议的方法是：

在获得最终日期数组后，仅调用setState一次。 将this.state.dates记录在setState的回调中。只有在React正确更新this.state之后，才会调用它。 这里需要注意的关键点是setState是异步的。您可能不需要在实际代码中对数组进行console.log

阅读更多关于setState的信息