何时使用 React setState 回调

是的，因为在某种程度上起作用。这意味着调用变量后不会立即更改。因此，如果您想在状态变量上设置状态后立即执行操作，然后返回结果，则回调将很有用setStateasynchronoussetStatethis.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" });
  }
},
....

上述代码可能无法按预期工作，因为在对变量执行验证之前，变量可能尚未发生突变。现在您可能想知道我们可以在函数本身中执行验证，但是如果我们可以在 changeTitle 函数本身中处理这个问题，那将是更好、更干净的方式，因为这将使您的代码更有条理和易于理解titlerender()

在这种情况下，回调很有用

....
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" });
  }
},
....

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

另一种情况是 API 调用

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

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

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

这 1.我想到的用例是一个调用，它不应该进入渲染，因为它会运行状态更改。API 调用应该只在特殊状态更改时执行，而不是在每次渲染时执行。apieach

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

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

因此，对于任何状态更改，都可以在 render 方法正文中执行操作。

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

考虑 setState 调用

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

想法

setState 可以在异步函数中调用

所以你不能依赖.如果上述调用是在异步函数内部进行的，则该函数将引用该时间点组件的状态，但我们希望这指的是 setState 调用或异步任务开始时状态内部的属性。由于任务是异步调用，因此该属性可能在一段时间内发生了变化。因此，使用关键字来引用状态的某些属性是不可靠的，因此我们使用参数为 previousState 和 props 的回调函数，这意味着当异步任务完成并且是时候使用 setState 调用更新状态时，prevState 将在 setState 尚未启动时立即引用状态。确保 nextState 不会损坏的可靠性。thisthisthis

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

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

具有回调功能的 setState 的正确代码：

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

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

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

this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});

有时我们需要一个代码块，我们需要在 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
     }
  });
}

render 函数的 UI 块中也需要 enableModal 布尔值，这就是我在这里执行 setState 的原因，否则，可能只检查一次条件，要么调用 API 集，要么不调用 API 集。

回调有一个罕见但重要的案例。setState

您希望在更新属性后重新计算状态，并且您的重新计算可能会再次更新。你不能只使用 depending on ，因为 React 会将其视为“检测到循环依赖”。你可以通过使用回调来规避 React。但请确保您没有创建无限循环。xxuseEffectxsetState

我已经将这个解决方案应用于 2 个巨大的 React 项目。

功能组件的 setState 回调

所有答案都是关于如何将函数传递给类组件的 setState 函数。但是对于功能组件，我强烈建议使用自定义钩子函数：callback

import { useRef, useCallback, useEffect, useState } from 'react';
import type { Dispatch, SetStateAction } from 'react';
import isFunction from 'lodash.isfunction';

type StateFunctionType<S> = Dispatch<SetStateAction<S>>;
export type SetStateCallbackGeneric<S> = (
  x: S | StateFunctionType<S>,
  cb?: (newState: S) => void
) => void;

const useStateCallback = <T>(
  initialState: T
): [T, SetStateCallbackGeneric<T>] => {
  const [state, setState] = useState<T>(initialState);
  const cbRef = useRef<any>(null);

  const setStateCallback: SetStateCallbackGeneric<T> = useCallback(
    (newState, cb) => {
      cbRef.current = cb;
      setState(newState as any);
    },
    []
  );

  useEffect(() => {
    if (isFunction(cbRef?.current)) {
      // @ts-ignore
      cbRef?.current?.(state);
      cbRef.current = null;
    }
  }, [state]);

  return [state, setStateCallback];
};

export default useStateCallback;

通过使用这个钩子函数，你可以很容易地将一个函数传递给 setter 函数，请看一个例子：callback

const [text, setText] = useStateCallback<string>('')

const handleFoo = (txt: string) => {
  setText(txt, () => {
    // Do What you want exactly AFTER text gets updated
  })
};