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

【问题标题】：How to pass a function to SetState callback after updating? (Reactjs)更新后如何将函数传递给 SetState 回调？（反应）
【发布时间】：2021-11-21 20:06:09
【问题描述】：

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

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

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

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

即使该函数作为 setState 回调调用，它仍会获取旧值。

我不确定问题是出自我的问题还是根本不可能..

【问题讨论】：

您会立即使用() 调用setCallback。尝试只传递函数名称setState(..., setCallback)
我试过了，但没有用，我也不确定他们为什么关闭它，但幸运的是有人回答了它。

标签： javascript reactjs react-hooks use-state

【解决方案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 */]);

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

【讨论】：

效果很好，非常感谢您的解决方案和清晰的解释！

【解决方案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>

【讨论】：