react中添加窗口监听后hook保存数据获取异常问题

不知道你有没有遇到 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)
}
相关推荐
前端小趴菜056 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~7 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
ohMyGod_12313 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜0513 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界13 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
骑自行车的码农14 小时前
React短文系列 遍历fiber树 App的创建
前端·react.js
爱学习的茄子15 小时前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
Spider_Man16 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
10年前端老司机17 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
安替-AnTi18 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林