背景
在 hooks 的 useEffect 回调里面使用 setInterval 定时器调用 setState 方法，页面不更新，例如下面的代码
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(count + 1);
}, 1000);
}, []);
return <div>{count}</div>;
}
结果界面输出的结果一直是 1，无法生效？那么如何解决呢？
解决方案
- 在 useEffect 新增依赖属性
count，然后每次需要在返回的函数清空定时器
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => {
clearInterval(timer);
};
}, [count]);
- 使用
setState(() => {})的方式来更新状态
useEffect(() => {
setInterval(() => {
setCount((count) => count + 1);
}, 1000);
}, []);
