javascript - 更新后如何将函数传递给 SetState 回调？ ( react )

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 Hook 来记录任何状态更新。

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

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

useEffect 和依赖数组相当于 componentDidMount 和 componentDidUpdate。上面使用的是 componentDidUpdate 生命周期来“响应”状态更新并触发副作用。