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开发中如何使用require.ensure加载es6风格的组件
本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了对于React各种状态管理器的解读,文中给大家提到了状态管理器是如何使用的，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
这篇文章主要为大家介绍了react实现todolist的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
React 最为核心的就是 Virtual DOM 和 Diff 算法，diff算法的基础是Virtual DOM，接下来通过本文给大家介绍React中diff算法的相关知识，对React中diff算法感兴趣的朋友跟随小编一起学习下吧2021-05-05
这篇文章主要为大家详细介绍了react中的双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了React中Props的浅对比的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-05-05
这篇文章主要为大家介绍了前端框架react-spring基础用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下2022-12-12
React函数式组件Hook中的useState函数的详细解析
Hook 就是 JavaScript 函数，这个函数可以帮助你钩入(hook into) React State以及生命周期等特性，这篇文章主要介绍了React Hook useState函数的详细解析的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了React跨端动态化之从JS引擎到RN落地，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论