React Hook 监听localStorage更新问题
更新时间：2023年10月26日 08:46:13 作者：叫我虫虫吧
这篇文章主要介绍了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)
}
}, [])总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解antd+react项目迁移vite的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
本篇文章主要介绍了React-Native之定时器Timer的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家介绍了React useRef原理的深入理解分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了React Router V4使用指南(精讲)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了React Context源码实现原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了React如何利用lazy+Suspense实现路由懒加载，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起了解一下2023-06-06
这篇文章主要为大家介绍了react组件中过渡动画的问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React中获取数据的3种方法及优缺点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家详细介绍了基于React Native 0.52实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了浅谈React深度编程之受控组件与非受控组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论