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

Posted 2023-02-22

【中文标题】更新后如何将函数传递给 SetState 回调？ （反应）

【英文标题】：How to pass a function to SetState callback after updating? (Reactjs)

【发布时间】：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)

我试过了，但没有用，我也不确定他们为什么关闭它，但幸运的是有人回答了它。

【参考方案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>