react hooks 中的闭包问题

475 阅读1分钟

最近在项目中使用 react hooks 时遇到了一个在定时器中获取不到最新数据的问题,代码如下

const Root = () => {

    const [arr, setArr] = React.useState([])
    const [num, setNum] = React.useState(0)
    const [time, setTime] = React.useState(null)
    
    
    const start = () => {
        let temp = setInterval(()=>{
            
            console.log(num) // 这里打印的值永远是 0 除非关闭定时后再次启动定时器
            setNum((num)=>++num)
        }, 1000)

        setTime(temp)

    }

    const stop = () => {
        clearInterval(time)
    }

    return(
        <View style={{top: 100, position: 'absolute'}}>
          
            <Button title={'开始'} onPress={()=>{
                start()
            }}/>
            <Button title={'结束'} onPress={()=>{
                stop()
            }}/>

        </View>

    )
}

解决方法(将值类型改为引用类型,每次修改不修改引用类型的地址即可,这样闭包的话,引用类型的地址不变,但是值变了,是可以通过不变的地址获取值)

将 num 改为 const [num, setNum] = React.useState({num: 0}) 这种形式就好了