使用 React hooks 立即更新状态

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]);

这是代码片段，希望这能消除您的疑虑：

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

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