不知道你有没有遇到 react hooks
时添加窗口监听中的问题,使用 useEffect
中添加窗口监听的时候,访问 useState
中的参数时,会返回 useState
给定的初始数据
,这个问题可能会令很多人头疼,不知道问题出现在哪里,下面就提供给解决方案
错误案例示范
js
const [data, setData] = useState<string[]>([])
useEffect(() => {
setData(["123", "456"])
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize)
}
}, [])
const onResize = () => {
//会发现打印的data一直为初始值,设置为新的下次访问也是初始值
console.log(data)
}
问题与解决方案
当我们使用 addEventListener
监听数据 时,无法正确获取 useState
中的值,其会获取到最初始的数据(猜测原因可能是绑定函数时捕获的 data 对象是最初始的 state,当 state 更新时会生成一个新的 state,且被捕获的 state 没有更新为最新的 state,因此获取到的不是更新后的 state)
因此,我们需要重新绑定监听,然后就可以获取到 useState
中的数据了,只需要 useEffect
中监听 data 即可(新起一个useEffect,可以直接避免监听导致的递归问题,也可以在一个里面手动处理)
示范改进
js
const [data, setData] = useState<string[]>([])
useEffect(() => {
setData(["123", "456"])
}, [])
useEffect(() => {
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize)
}
}, [data])
const onResize = () => {
//会发现打印的data一直为初始值,设置为新的下次访问也是初始值
console.log(data)
}