在useEffect中修改state

来源：14-16 Hooks使用中的几个注意事项

_驺虞

2021-06-03

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？

写回答

1回答

双越

2021-06-03

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

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

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

双越

_驺虞

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

2021-06-04

共2条回复

前端框架及项目面试聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4695 学习 · 1667 问题

查看课程

相似问题

useEffect内部不能修改state的疑问

回答 2

useEffect可能出现死循环

回答 2

关于useEffect内部不能修改state的坑的问题

回答 1

state为什么要放到 constructor中，直接在class中写state={...}不行吗

回答 3

关于 useEffect 内部不能修改 state 的问题

回答 1

打开慕课网App查看更多内容