为什么在此内部的阵列上的concat不起作用

Question

我正在尝试将位于键date下组件状态的数组中添加渲染日期，但它总是返回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
    }
  }

Answer 1

首先，状态过渡不是立即的，它们是异步的（在大多数情况下）。想像一下，就像您设置状态时一样，它补充说，状态变化为变化和反应的队列正在不断地通过该队列，完成所有这些状态的变化。因此，如果您更改状态，那么在下一行代码上立即打印状态，国家可能不会更改，因为控制台。Log。经过那个队列。

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

Answer 2

推荐的方法是：

1. 最终dates数组后仅致电setState。
2. log this.state.dates在setState的回调中（仅在this.state被React正确更新后才调用。

这里要注意的关键点是setState是异步的。您可能不需要console.log实际代码中的数组。

在此处阅读有关setState的更多信息。

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

Answer 3

值得阅读setState（）的文档。https://facebook.github.io/react/docs/reeact-component.html#setstate

它将排队更改，但是如果要以某种方式使用新值，则有一个回调版。

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

Answer 4

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

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

您将获得您期望的结果。