reack-hooks

如何在计时器中使用useState改变状态

• 场景：在setInterval中每隔一秒改变一次time变量的数值，并当time变为0时取消计时器（注意setState异步特点）

• 解决办法：设置新变量

• 错误做法：

import {useState, useEffect} from 'react'
const Example = props => {

    var time = startTime
    
    const timeFun = () => {
        timer = setInterval(() => {
            setTime(time-1)---------->拿不到变化后time的值，设置出错
            if (time === 0) {
                clearInterval(timer)
                setTime(startTime)
            }
        },1000)
    }
}

• 正确做法（设置新变量）：

import {useState, useEffect} from 'react'
const Example = props => {

    var time = startTime
    
    const timeFun = () => {
        let asd = startTime;
        timer = setInterval(() => {
            setTime(--asd)
        },1000)
    }
    
    useEffect(() => {
        console.log('time',time)
        if (time === 0) {
            clearInterval(timer)
            setTime(startTime)
        }
    }, [time])
}