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

Question

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

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

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

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

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

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

Answer 1

与 class 组件的 this.setState 不同，函数组件的 useState 状态更新器函数不需要在 after 后调用第二个回调参数任何状态更新。

您正在做的是将状态更新加入队列并传递无关参数，其中之一是您立即调用的函数，并将任何 return 值传递给 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 */]);

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

Answer 2

第一个

这件事与React无关，你的做法会导致setCallback()函数先执行

我编辑你的代码和演示结果：

  const onClickCallback = () => {
    // Here will run setCallback function before setState function.
    setState('...', setCallback())
  }

  const setCallback = () => {
    console.info('run setCallback')
  }

  const setState = () => {
    console.info('run setState')
  }

  onClickCallback()

第二个

回答你的问题，你可以用useEffect来实现你的目标。

简单示例：

const {useState, useEffect} = React;

const DemoComponent = (props) => {
  
  const [state, setState] = useState('initialState')

  useEffect(() => {
    if (state === 'something') {
      console.info('state:' + state)
    }
  }, [state])

  const onClickCallback = () => {
    setState('something')
  }

  return (
  <div>
    <button onClick={onClickCallback}>Click</button>
  </div>
  );
}

ReactDOM.render(
  <DemoComponent />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

How to pass a function to SetState callback after updating? (Reactjs)

javascript

reactjs

react-hooks

use-state

第一个

第二个

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

How to pass a function to SetState callback after updating? (Reactjs)

javascript

reactjs

react-hooks

use-state

第一个

第二个

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