更新后如何將 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>