setInterval和setTimeout无法获取到代码开始执行之后useState变化的值,例如:
const [flow, setFlow] = useState(null)
function cycle4(){
setInterval(()=>{
setFlow(true)
console.log(flow,'flow')
},2000)
}
产生原因
因为每次setFlow后会重新创建函数,由于并没有及时清理掉setInterval,setInterval执行的上下文环境都是第一次创建本函数式组件的上下文(所以flow值不会超过1)
解决方法
//方案1
const flow = useREF(null)
function cycle4(){
setInterval(()=>{
flow.current=true
console.log(flow,'flow') //打印出最新的值
},2000)
}
//方案2
const [flow,setFlow] = useState(null)
function cycle4(){
setInterval(()=>{
//数式的setValue会保存上一次的值,所以会取得最新值,该方式指定state该如何改变而不用引用当前state
console.log(flow)
setFlow(o=>o)
},2000)
}