为什么我的handleClick函数中的setState一步更新了组件的状态？

Question

我在日历的一天中附加了handleClick功能：

// Handles auto fill in dates for check-in and checkout
  handleClick(month, day, yr) {
    let newClicks = this.state.clicks + 1;
    let realMonthNum = month + 1;

    this.setState({ clicks: newClicks });

    if (newClicks % 2 !== 0) {
      this.setState({ selectedStartMonth: realMonthNum });
      this.setState({ selectedStartDay: day });
      this.setState({ selectedStartYr: yr });
      this.resetEndDate();
    } else {
      this.setState({ selectedEndMonth: realMonthNum });
      this.setState({ selectedEndDay: day });
      this.setState({ selectedEndYr: yr });
    }
  }

基本上，它应该在第一次单击时更新状态的开始日期切片，然后在第二次单击时更新状态的结束日期切片。但是，它正在运行，当我在控制台中查看状态时，我注意到状态的开始和结束部分将在一步之后进行更新。例如，在第一次单击时，我的状态是初始值。完成第二次单击后，selectedStartMonth，selectedStartDay和selectedStartYr会在我的状态下更新。并且只有在第三次单击后，selectedEndMonth，selectedEndDay和selectedEndYr才会更新。为什么setState被延迟？

这是我的onClick事件的样子：

<div className="number-days">
  {this.state.days.map(day => <div className="number" onClick={() => 
    this.props.handleClick(currentMonth, day, yr)}>{day}</div>)}
</div>

这是初始状态：

this.state= {
      currentDay: currentDate.getDate(),
      currentMonth: currentDate.getMonth(),
      nextMonth: (currentDate.getMonth() + 1) % monthsLength,
      currentYr: currentDate.getFullYear(),
      selectedStartMonth: '',
      selectedStartDay: '',
      selectedStartYr: '',
      selectedEndMonth: '',
      selectedEndDay: '',
      selectedEndYr: '',
      clicks: 0
    }

如果需要，这是控制台日志在第一次和第二次单击时输出的内容：

Answer 1

可能与此有关（来自对docs的回应）：

setState（）不会立即使this.state突变，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。

不能保证对setState的调用可以同步操作，并且可以批量调用以提高性能。

您在代码的什么时候将状态记录到控制台？

Answer 2

setState不需要顺序发生。如果您需要在setState完成后强制执行某些操作，则需要使用setState回调

setState（{.....}，（）=> { setState之后需要做什么}）