ReactHook hooks和定时器setInterval产生的bug

原创于 2022-12-12 14:13:13 发布 · 511 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #reactjs

React 专栏收录该内容

30 篇文章

订阅专栏

本文探讨了使用定时器(setInterval)更新React组件状态(state)时遇到的问题：state值未能实时更新。通过分析发现，原因是每次setState后未及时清除定时器，导致定时器执行的上下文环境始终为组件初次渲染时的状态。文章提供了正确的解决方法，即使用函数式的setState来确保获取到最新的state值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

使用定时器改变state,state的值并不是最新值

const _onClick = function ()
 {
   setInterval(() => {
     console.log(value);
     setValue(value + 1);
   },1000)
 }

产生原因：因为每次setValue后会重新创建函数,由于并没有及时清理掉setInterval，setInterval执行的上下文环境都是第一次创建本函数式组件的上下文(所以value值不会超过1)

解决方案：

setInterval(() => {
     console.log(value);
     setValue(v=>v+1);      函数式的setValue会保存上一次的值,所以会取得最新值,该方式指定state该如何改变而不用引用当前state
   },1000)