reactHook的useState在定时器下没法获取最新的值

642 阅读1分钟

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)
    }