如何在更新后将函数传递给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 dependency array充当ComponentDidMount和ComponentDidUpDate的等效项。上面使用的componentdidUpdate生命周期对状态更新做出“反应”并触发副作用。