ReactHook hooks和定时器setInterval产生的bug

问题:

使用定时器改变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)

你可能感兴趣的:(React,前端,javascript,reactjs)