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

Question

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

我有一个 function，我需要在 state 设置为新值后调用它。

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

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

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

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

Answer 1

与 class 组件的this.setState不同，function 组件的useState state 更新程序 function 不会在任何 state 更新后调用第二个回调参数。

您正在做的是排队 state 更新并传递无关的 arguments，其中之一是您立即调用的 function，并将任何返回值传递给setState ，这将被忽略。

setState(..., setCallback()) // setCallback invoked and result passed

使用依赖于 state 的useEffect挂钩来记录任何 state 更新。

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生命周期对 state 更新做出“反应”并触发副作用。

Answer 2

第一的

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

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

 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>