使用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值。逻辑操作可以在此处执行。
posted @ 2020-07-20 16:36  你风致  阅读(18694)  评论(4编辑  收藏  举报