React Hook 监听localStorage更新问题
场景
数据存储在了localStorage里,localStorage变化实时更新组件里使用到的数据
误区
下意识想到的是按照useEffect监听useState变化那一套
useEffect(()=>{ useData(localStorage.getItem('rightCartData')) },[localStorage.getItem('rightCartData')])
很明显不行,为什么?
示例不起作用的原因:
是和传递给 useEffect 的依赖数组有关,它决定了在组件渲染时是否重新运行(render),这意味着如果 localStorage 更改,但它必须 先渲染(render)。
解决这个问题的方法:
是设置对 localStorage 的订阅,监视变化并通知组件重新渲染
Window: storage event - Web APIs | MDN
完整解决代码
如下:
useEffect(() => { function rightCartData() { const item = JSON.parse(localStorage.getItem('rightCartData')) if (item) { setState(item); } } window.addEventListener('storage', rightCartData) return () => { window.removeEventListener('storage', rightCartData) } }, [])
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
修复Next.js中window is not defined方法详解
这篇文章主要为大家介绍了修复Next.js中window is not defined方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12详解React开发中使用require.ensure()按需加载ES6组件
本篇文章主要介绍了详解React开发中使用require.ensure()按需加载ES6组件,非常具有实用价值,需要的朋友可以参考下2017-05-05React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧2021-06-06React Native之prop-types进行属性确认详解
本篇文章主要介绍了React Native之prop-types进行属性确认详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论