何时使用 React setState 回调 [英] When to use React setState callback

查看:39
本文介绍了何时使用 React setState 回调的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当一个 react 组件状态改变时,render 方法会被调用.因此,对于任何状态更改,都可以在渲染方法主体中执行操作.那么 setState 回调有特定的用例吗?

When a react component state changes, the render method is called. Hence for any state change, an action can be performed in the render methods body. Is there a particular use case for the setState callback then?

推荐答案

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

Yes there is, since setState works in an asynchronous way. That means after calling setState the this.state variable is not immediately changed. so if you want to perform an action immediately after setting state on a state variable and then return a result, a callback will be useful

考虑下面的例子

....
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 函数本身中处理它会更好更干净,因为这会使您的代码更有条理且易于理解

The above code may not work as expected since the title variable may not have mutated before validation is performed on it. Now you may wonder that we can perform the validation in the render() function itself but it would be better and a cleaner way if we can handle this in the changeTitle function itself since that would make your code more organised and understandable

在这种情况下回调很有用

In this case callback is useful

....
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(),因为每次发生重新渲染时都会调用它,因此在许多此类情况下您可能需要回调.

Another example will be when you want to dispatch and action when the state changed. you will want to do it in a callback and not the render() as it will be called everytime rerendering occurs and hence many such scenarios are possible where you will need callback.

另一种情况是API调用

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

A case may arise when you need to make an API call based on a particular state change, if you do that in the render method, it will be called on every render onState change or because some Prop passed down to the Child Component changed.

在这种情况下,您需要使用 setState 回调 将更新的状态值传递给 API 调用

In this case you would want to use a setState callback to pass the updated state value to the API call

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

这篇关于何时使用 React setState 回调的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆