何时使用 React setState 回调

Question

当一个 react 组件状态发生变化时，会调用 render 方法。因此，对于任何状态更改，都可以在渲染方法主体中执行操作。那么 setState 回调是否有特定的用例？

原文由 Sahil Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，因为 setState 以 asynchronous 方式工作。这意味着在调用 setState 之后 this.state 变量不会立即改变。所以如果你想在状态变量上设置状态后立即执行操作然后返回结果，回调将很有用

考虑下面的例子

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

上面的代码可能无法按预期工作，因为 title 变量在对其执行验证之前可能没有发生变化。现在您可能想知道我们可以在 render() 函数本身中执行验证，但是如果我们可以在 changeTitle 函数本身中处理它会更好更简洁，因为这会使您的代码更有条理和易于理解

在这种情况下回调很有用

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

另一个例子是当你想要 dispatch 并在状态改变时采取行动。您将希望在回调中执行此操作，而不是 render() 因为每次发生重新渲染时都会调用它，因此许多此类场景都可能需要回调。

另一种情况是 API Call

当您需要根据特定状态更改进行 API 调用时，可能会出现这种情况，如果您在渲染方法中执行此操作，它将在每次渲染时调用 onState 更改或因为某些 Prop 传递给 Child Component 改变了。

在这种情况下，您可能希望使用 setState callback 将更新后的状态值传递给 API 调用

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议