Question

我正在尝试在触发后更新状态，并希望立即使用该状态来触发函数，但是该状态不会立即更新。

有什么建议吗？

                 <Button
                       onClick={() => {
                        console.log(finalData) //old data
                       setFinalData(mutableData); // updating state
                        console.log(finalData) // still geeting old state
               }>
           </Button>

Answer 1

setFinalData是一种异步行为，因此，如果您：

console.log(finalData) //old data
setFinalData(mutableData); // <----- async behavior
console.log(finalData) // you will never get updated finalData directly here

解决方案：useEffect

useEffect(() => {
    // you will get updated finalData here, each time it changes
    console.log(finalData);
    // you can trigger your function from here
},[finalData]);

这是代码段，希望这可以消除您的疑问：

const { useState , useEffect } = React;

const App = () => {

  const [finalData,setFinalData] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setFinalData([...finalData, "Vivek" , "Darshita"]);
      console.log("finalData -----> not updated right after" ,finalData);
    },2000);
  },[]);

  useEffect(() => {
    if(finalData.length)
      console.log("Final data updated , invoke your function" , finalData)
  },[finalData]);

  return (
    <div>
      { finalData.map(user => <p>{user}</p>) }
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

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

使用react挂钩立即更新状态

1 个答案: