React Hook 監(jiān)聽localStorage更新問題
更新時間：2023年10月26日 08:46:13 作者：叫我蟲蟲吧
這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
場景
數(shù)據(jù)存儲在了localStorage里，localStorage變化實時更新組件里使用到的數(shù)據(jù)
誤區(qū)
下意識想到的是按照useEffect監(jiān)聽useState變化那一套
useEffect(()=>{
useData(localStorage.getItem('rightCartData'))
},[localStorage.getItem('rightCartData')])很明顯不行，為什么？
示例不起作用的原因：
是和傳遞給 useEffect 的依賴數(shù)組有關(guān)，它決定了在組件渲染時是否重新運行（render），這意味著如果 localStorage 更改，但它必須 先渲染（render）。
解決這個問題的方法：
是設(shè)置對 localStorage 的訂閱，監(jiān)視變化并通知組件重新渲染
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)
}
}, [])總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react開發(fā)中如何使用require.ensure加載es6風格的組件
本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風格的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了對于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要為大家介紹了react實現(xiàn)todolist的增刪改查，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來通過本文給大家介紹React中diff算法的相關(guān)知識，對React中diff算法感興趣的朋友跟隨小編一起學習下吧2021-05-05
這篇文章主要為大家詳細介紹了react中的雙向綁定，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了React中Props的淺對比的相關(guān)資料，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-05-05
這篇文章主要為大家介紹了前端框架react-spring基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-12-12
React函數(shù)式組件Hook中的useState函數(shù)的詳細解析
Hook 就是 JavaScript 函數(shù)，這個函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React Hook useState函數(shù)的詳細解析的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了React跨端動態(tài)化之從JS引擎到RN落地，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09