更新后如何将函数传递给 SetState 回调？（反应）

Question

在询问之前我进行了很多搜索，但似乎找不到适合我的解决方案。

我有一个函数需要在状态设置为新值后调用。

const onClickCallback = () => {
    setState(..., setCallback())
}

const setCallback = () => {
    console.log(State) // this prints the old State value
    if(State === something){
        ....
    }
}

尽管该函数被作为 setState 回调调用，但它仍然获取旧值。

我不确定问题是出在我这边还是根本不可能..

Answer 1

与类组件不同this.setState，函数组件的状态更新函数在任何状态更新后useState都不会调用第二个回调参数。

您正在做的是将状态更新排队并传递无关参数（其中之一是您立即调用的函数），并将任何返回值传递给setState，这将被忽略。

setState(..., setCallback()) // setCallback invoked and result passed

使用useEffect依赖于状态的钩子来记录任何状态更新。

const onClickCallback = () => {
  setState(...);
};

React.useEffect(() => {
  console.log(State) // this prints the updated state value
  if(state === something){
      ....
  }
}, [state, /* add other dependencies here */]);

useEffectwith 依赖数组相当于componentDidMountand componentDidUpdate。这是componentDidUpdate上面使用的生命周期，用于对状态更新做出“反应”并触发副作用。