254

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

4

5 回答 5

282

是的，因为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 调用时，可能会出现这种情况，如果您在 render 方法中这样做，它将在每次渲染onState更改时调用，或者因为某些 Prop 传递给Child Component更改。

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

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....
于 2017-02-04T09:32:34.037 回答
71 
this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});
于 2018-05-30T12:29:47.867 回答
48

1. 出现在我脑海中的用例是一个api调用，它不应该进入渲染，因为它将运行each状态更改。并且 API 调用应该只在特殊状态更改时执行，而不是在每次渲染时执行。

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

因此，对于任何状态更改，都可以在渲染方法主体中执行操作。

非常糟糕的做法，因为render-method 应该是纯的，这意味着不应该执行任何操作、状态更改、api 调用，只需复合您的视图并返回它。应仅对某些事件执行操作。渲染不是一个事件，而是componentDidMount例如。

于 2017-02-04T10:56:17.360 回答
32

考虑 setState 调用

this.setState({ counter: this.state.counter + 1 })

主意

setState 可以在异步函数中调用

所以你不能依赖this. 如果上面的调用是在异步函数内部进行的，this则将引用该时间点的组件状态，但我们希望这会在 setState 调用或异步任务开始时引用状态内部的属性。并且由于任务是异步调用，因此该属性可能已及时更改。因此使用this关键字来引用状态的某些属性是不可靠的，因此我们使用回调函数，其参数是 previousState 和 props 这意味着当异步任务完成并且是时候使用 setState 更新状态时调用 prevState 将在 setState 时引用状态还没有开始。确保 nextState 不会被破坏的可靠性。

错误代码：会导致数据损坏

this.setState(
   {counter:this.state.counter+1}
 );

具有回调函数的 setState 的正确代码：

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

因此，每当我们需要根据属性刚刚拥有的值将当前状态更新到下一个状态并且所有这些都以异步方式发生时，使用 setState 作为回调函数是个好主意。

我试图在这里用codepen解释它 CODE PEN

于 2018-03-10T08:49:49.747 回答
3

有时我们需要一个代码块，我们需要在 setState 之后立即执行一些操作，我们确定状态正在更新。这就是 setState 回调发挥作用的地方

例如，有一个场景，我需要为 20 个客户中的 2 个客户启用一个模式，对于我们启用它的客户，有一组时间进行 API 调用，所以看起来像这样

async componentDidMount() {
  const appConfig = getCustomerConfig();
  this.setState({enableModal: appConfig?.enableFeatures?.paymentModal }, async 
   ()=>{
     if(this.state.enableModal){
       //make some API call for data needed in poput
     }
  });
}

在渲染函数的 UI 块中也需要 enableModal 布尔值，这就是我在这里设置 setState 的原因，否则，可以只检查一次条件，然后调用 API 集或不调用。

于 2020-12-11T13:08:03.537 回答