如何正确调用 setState(updater[, callback]) 中的回调？答案

【问题标题】：How to properly call the callback in setState(updater[, callback])?如何正确调用 setState(updater[, callback]) 中的回调？
【发布时间】：2018-09-18 13:04:06
【问题描述】：

所以我一直在努力将回调传递给this.setState()，因为我是这样做的：

this.setState({ anyState }, this.anyFunction()); 该函数被调用，但在状态更新后并没有真正调用它。结果，由于我也在我的anyFunction 中更新了相同的anyState，所以两个状态更新之间存在某种冲突，只有第一个有效。

然后我发现我必须这样做

this.setState({ anyState }, () => this.anyFunction());

要么

this.setState({ anyState }, function() { this.anyFunction() });

让事情正常进行。

为什么会这样？为什么我的第一种方法似乎是错误的？

【问题讨论】：

this.anyFunction() 执行函数。 () => this.anyFunction() 延迟函数执行。因为setState 需要一个回调，那么你应该给它一个函数引用，而不是通过this.anyFunction() 立即执行函数，它将传入this.anyFunction 的返回值，或者undefined 如果没有显式return 声明。
我猜我会说你一直在调用函数，而不是在this.setState({ anyState }, this.anyFunction());中传递对它的引用
"如何正确调用回调" - 这正是问题所在。你应该传递一个回调函数，你应该不要自己调用它。
谢谢@vlaz，清澈如水。如果可以的话，把它作为答案，然后我可以验证它。现在更清楚了！

标签： javascript reactjs callback setstate

【解决方案1】：

第一种方法将调用结果作为回调传递给this.anyFunction。这很可能不是您想要的。

要解决这个问题，您需要删除括号，即将代码更改为：

this.setState({ anyState }, this.anyFunction);

但是，这有一个问题，this 内部的绑定 anyFunction 将不再指向类实例。要解决此问题，您需要将anyFunction 声明为箭头函数或显式绑定this。

【讨论】：

我认为绑定的必要性取决于具体情况。例如，如果setState 出现在componentDidmount 或任何其他绑定方法中，则无需在此处绑定anyFunction。

【解决方案2】：

在第一个示例中，您使用函数的结果作为第二个参数。

说this.anyFunction返回一个常量"some_text"，使用

this.setState({ anyState }, this.anyFunction());

和使用一样

this.setState({ anyState }, "some_text");

在第二个示例中，您实际上是在传递一个回调。或作为参数的函数。那个函数还没有执行，会在 setState() 结束时执行。

有关异步编程和回调的更多信息，您可以观看此演讲：https://javascript-conference.com/javascriptecmascript/asynchronicity-concurrency/

【讨论】：