在useEffect中修改state

Question

function useStateTrap() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
      console.log("setInterval", count);
    }, 1000);

    return () => clearInterval(timer);
  }, []);
  return <div>count:{count}</div>;
}

页面显示count为1，说明setCount(count + 1)生效了，因为count初始值是0，那么请问打印结果为什么依然是 setInterval 0？

Answer 1

双越 2021-06-03 21:53:18

这就跟 class 组件里的 setState 一样，异步更新。

你刚刚 setState({...}) 之后，没法在同步代码中获取最新的 state 的值，除非用回调函数。

可以再去回顾一下 class 组件的 setState ，当时讲的挺详细的。

• 提问者 _驺虞 #1

  在 class 组件中，setInterval 里的 setState 是同步的啊，难道在函数组件中的 setState 都是异步的？

• 双越 回复 提问者 _驺虞 #2

  不一样。class 组件是获取 this.state 这个属性。而这里的 count 就是一个简单的 number 类型，一个简单的 js 变量。基于基本的 js 语法也能看出来。所以这里打印的就是 count 初始化的值。函数组件里 count 要变化的话，那该函数得重新执行（即组件更新）。而 useEffect(fn, []) 第二个参数是 [] ，这就表示函数更新时不会执行这个 fn 。所以归根结底这里的 count 就一直是 0 。总结：第一，注意基本的 js 语法；第二，组件时函数要重新执行、以及 useEffect 是否会重新执行？