最近在项目中使用 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}) 这种形式就好了