React - this.setState和this.forceUpdate不更新状态以保存最新值

Question

我有一个窗体显示基于日期范围的数据。第一次加载时，>它显示最近1小时的数据。我正在使用react date>>>> picker来呈现开始和结束时间。当用户更改开始和结束>>>日期时，调用下面的函数。在此功能，我想设置>>>状态与用户选择的开始和结束日期，但状态一直认为>>>前面的开始日期和结束日期值

refreshTableOnDateChange(startDateSelected,endDateSelected) { 
      this.setState({startDate: null, endDate: null}); 
      console.log("inside refreshTableOnDateChange this.state.startDate is", startDateSelected); 
      console.log("inside refreshTableOnDateChange this.state.endDate is", endDateSelected); 
      let startDateFormatted = startDateSelected.format('YYYY-MM-DD HH:mm'); 
      let endDateFormatted = endDateSelected.format('YYYY-MM-DD HH:mm'); 
       this.setState({startDate: startDateFormatted, endDate: endDateFormatted}); 
       this.forceUpdate(); 
       console.log("start date is", this.state.startDate); 
      console.log("end date is", this.state.endDate); 
      this.load(this.state.orderType); 
      } 

Answer 1

的setState不会立即发生变异状态 - 从反应文档：

https://facebook.github.io/react/docs/react-component.html#setstate

的setState（）不会立即发生变异this.state而是创建一个 挂起状态转变。调用 方法后访问this.state可能会返回现有值。没有 保证同步操作对setState的调用，并且调用可能为 进行批处理以提高性能。

此代码应该是呈现给你看更新：

 console.log("start date is", this.state.startDate);