react setState 回调没有更新状态

Question

如果monthOffset = 12，条件将评估为真，如果yearOffset = 2018，则将yearOffset 状态更新为2017。根据我阅读的反应文档和其他答案，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

文档说回调始终有效，但我从经验中知道它并不总是返回您所期望的。我认为这与在状态本身中使用可变对象有关。

文档：https://reactjs.org/docs/react-component.html#setstate

你不能完全依赖回调。相反，您可以做的是创建

var stateObject = this.state

对对象进行任何必要的更改：

stateObject.monthOffset -= 1

然后像这样设置状态：

this.setState(stateObject);

这样您就可以在stateObject 中获得nextState 的副本

澄清：您想在设置状态之前进行所有评估，所以这样做：

monthOffset -= 1

然后if (monthOffset === 12) yearOffset -=1;

然后var stateObj = {monthOffset: monthOffset, yearOffset: yearOffset}

然后this.setState(stateObj);

---

来自文档： "setState() 的第二个参数是一个可选的回调函数，一旦 setState 完成并重新渲染组件就会执行。一般我们建议使用componentDidUpdate() 代替这种逻辑。"

所以基本上如果你想获得下一个状态，你应该在调用setState()的函数中拥有它的副本，或者你应该从componentDidUpdate获取nextState

---

事后思考：您作为参数传递给setState() 的任何内容通过引用传递（而不是通过值）。所以，如果你在你的状态中有一个对象SearchFilters: {}，并且在你对setState()的调用中，你有

setState({SearchFilters: DEFAULT_SEARCH_FILTERS}); // do not do this

您可能已将SearchFilters 设置为DEFAULT_SEARCH_FILTERS 以清除名为“搜索过滤器”的表单，但您实际上将DEFAULT_SEARCH_FILTERS（常量）设置为SearchFilters，清除了您的DEFAULT_SEARCH_FILTERS.

预期的行为？你告诉我。

Answer 2

在 React 中调用 setState 有两种流行的模式：对象 setState 和 "functional setState"。 Functional setState is generally used when the current state（或“先前状态”，或任何你想调用的旧状态）is invoked in the setState call. 这是因为 setState 是异步的，因此后续 setStates 有时可以在 React 成功完成之前运行第一个setState 循环。

您在setState 调用中使用了现有状态，因此它是使用功能性setState 的合适位置。替换

this.setState({ monthOffset: monthOffset - 1 })

与

this.setState(monthOffset => {return {monthOffset: monthOffset - 1}})

如果你和我一样，当我第一次看到这个时，你可能会想，“嗯？这和我有什么不同？”不同之处在于，当 setState 被传递一个函数而不是一个对象时，它会将更新排队而不是通过通常的解析过程，从而确保事情按顺序完成。

或者你可能不这么想；您实际上在第二次 setState 通话中使用了功能性 setState。在你的第一个中使用它也将确保事情正确排队。

Answer 3

也许您可以通过以下方式简化您的逻辑，以避免多次调用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")
}