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)
}
}, [])总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了react build 后打包发布总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
深入理解React Native核心原理(React Native的桥接（Bridge)
这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接（Bridge),本文重点给大家介绍React Native的基础知识及实现原理，需要的朋友可以参考下2021-04-04
下面小编就为大家带来一篇浅谈react+es6+webpack的基础配置。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了React antd tabs切换造成子组件重复刷新,需要的朋友可以参考下2021-04-04
这篇文章主要介绍了react组件实例属性props,本文结合实例代码给大家简单介绍了props使用方法，代码简单易懂，需要的朋友可以参考下2023-01-01
React 浮层组件（也称为弹出组件或弹窗组件）通常是指在用户界面上浮动显示的组件,本文主要介绍了浮层组件的实现方法,感兴趣的小伙伴可以了解下2024-02-02
在React应用开发中,数据持久化是一个至关重要的需求,当用户刷新页面、关闭浏览器后重新打开应用,或者在不同设备间切换时,我们希望能够保持用户的数据状态,本文将全面介绍React项目中实现数据持久化的各种方法,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了利用React高阶组件实现一个面包屑导航的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了React中的JSX{ }的使用,React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求，对React JSX使用感兴趣的朋友一起看看吧2022-08-08
在React项目中引入国际化可以使用第三方库来实现，本文主要介绍了react项目中如何引入国际化，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论