代码的意图旨在随着count的更新,实时累加更新sum的值。
却发现在执行setSum后,打印sum的值为上一次得到的和。
究其原因,猜测是因为setSum异步了,导致打印的sum是还未计算完成的上一次的值。
import React, {useState,useEffect} from "react";
export default function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
const [sum, setSum] = useState(0);
useEffect(()=>{
console.log(count); //第一次结果0,第二次结果1,第三次结果2,第四次结果3,第五次结果4
console.log(sum+count);//第一次结果0,第二次结果1,第三次结果3,第四次结果6,第五次结果10
setSum(sum+count);
console.log(sum); //第一次结果0,第二次结果0,第三次结果1,第四次结果3,第五次结果6
},[count])
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
解决方式:
再写一个副作用Hook,只用于监视sum值的变化,从而进行操作
useEffect(()=>{
console.log(sum);
},[sum])
这样子,当上一个useEffect执行完setSum后,下一个useEffect监视到sum值的变化,从而打印sum值。逻辑操作可以在此处执行。