javascript - react setState 回调没有更新状态

Question

如果 monthOffset = 12 如果 yearOffset = 2018，条件将评估为真并将 yearOffset 状态更新为 2017。根据我读过的 react 文档和其他答案， this.setState 中的回调函数在状态更新后触发，但 console.log() 是仍在输出 2018。我尝试了几种不同的方法来根据其他相关问题的答案来实现此代码，但我的方法不起作用。我不确定为什么。

handleClick(e) {
  const { monthOffset, yearOffset } = this.state
  this.setState({ monthOffset: monthOffset - 1 })
  if ( monthOffset - 1 === 11 ) { this.setState((prevState) => { 
    return { yearOffset: prevState.yearOffset - 1 } },
    () => {console.log("yearOffset", yearOffset)}
  )}
  console.log("clicked")
}

Answer 1

也许您可以通过以下方式简化您的逻辑，以避免多次调用 setState 可能导致意外结果:

handleClick(e) {

  const { monthOffset, yearOffset } = this.state

  // call setState once
  this.setState({ 

    // Always decrement month offset
    monthOffset : monthOffset - 1, 

    // Only decrement year offset if current month offset === 12
    yearOffset : (monthOffset === 12) ? yearOffset - 1 : yearOffset

  }, () => {

    console.log("state updated to", this.state)
  })

  console.log("clicked")
}