何时使用React setState回调

Question

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

Answer 1

是的，因为setstate以异步的方式工作。这意味着在调用setstate之后，this.state变量不会立即更改。因此，如果您希望在对状态变量设置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" });
  }
},
....

另一个例子是当您想要dispate并在状态改变时执行操作时。您将希望在回调中执行，而不是render()，因为每次发生重新呈现时都会调用它，因此在需要回调的情况下，可能会出现许多这样的情况。

另一种情况是API调用

当您需要根据特定的状态更改进行API调用时，可能会出现这样的情况，如果您在render方法中这样做，则在每次renderonstate更改时，或者因为某个传递给子组件的Prop更改时，都会调用它。

在本例中，您需要使用setstate回调将更新的状态值传递给API调用

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