使用useState的赋值函数异步更新问题

代码的意图旨在随着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值。逻辑操作可以在此处执行。

使用useState的赋值函数异步更新问题

相关推荐