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

Question

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

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

然后我发现我必须做任何一个

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

任一

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

让事情正常进行。

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

Answer 1

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

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

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

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

Answer 2

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

说 this.anyFunction returns 常数 "some_text"，使用

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

等同于使用

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

在第二个例子中，你实际上传递了一个回调。或作为参数的函数。该函数尚未执行，将在 setState() 结束时执行。

How to properly call the callback in setState(updater[, callback])?