React Hook 監(jiān)聽localStorage更新問題
更新時(shí)間：2023年10月26日 08:46:13 作者：叫我蟲蟲吧
這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
場景
數(shù)據(jù)存儲在了localStorage里，localStorage變化實(shí)時(shí)更新組件里使用到的數(shù)據(jù)
誤區(qū)
下意識想到的是按照useEffect監(jiān)聽useState變化那一套
useEffect(()=>{
useData(localStorage.getItem('rightCartData'))
},[localStorage.getItem('rightCartData')])很明顯不行，為什么？
示例不起作用的原因：
是和傳遞給 useEffect 的依賴數(shù)組有關(guān)，它決定了在組件渲染時(shí)是否重新運(yùn)行（render），這意味著如果 localStorage 更改，但它必須 先渲染（render）。
解決這個(gè)問題的方法：
是設(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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
深入理解React Native核心原理(React Native的橋接（Bridge)
這篇文章主要介紹了深入理解React Native核心原理(React Native的橋接（Bridge),本文重點(diǎn)給大家介紹React Native的基礎(chǔ)知識及實(shí)現(xiàn)原理，需要的朋友可以參考下2021-04-04
下面小編就為大家?guī)硪黄獪\談react+es6+webpack的基礎(chǔ)配置。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
React antd tabs切換造成子組件重復(fù)刷新
這篇文章主要介紹了React antd tabs切換造成子組件重復(fù)刷新,需要的朋友可以參考下2021-04-04
react組件實(shí)例屬性props實(shí)例詳解
這篇文章主要介紹了react組件實(shí)例屬性props,本文結(jié)合實(shí)例代碼給大家簡單介紹了props使用方法，代碼簡單易懂，需要的朋友可以參考下2023-01-01
React實(shí)現(xiàn)浮層組件的思路與方法詳解
React?浮層組件（也稱為彈出組件或彈窗組件）通常是指在用戶界面上浮動顯示的組件,本文主要介紹了浮層組件的實(shí)現(xiàn)方法,感興趣的小伙伴可以了解下2024-02-02
React項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)持久化的方法大全
在React應(yīng)用開發(fā)中,數(shù)據(jù)持久化是一個(gè)至關(guān)重要的需求,當(dāng)用戶刷新頁面、關(guān)閉瀏覽器后重新打開應(yīng)用,或者在不同設(shè)備間切換時(shí),我們希望能夠保持用戶的數(shù)據(jù)狀態(tài),本文將全面介紹React項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)持久化的各種方法,需要的朋友可以參考下2025-09-09
利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例
這篇文章主要介紹了利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了React中的JSX{?}的使用,React使用JSX來替代常規(guī)的JavaScript，JSX可以理解為的JavaScript語法擴(kuò)展，它里面的標(biāo)簽申明要符合XML規(guī)范要求，對React?JSX使用感興趣的朋友一起看看吧2022-08-08
在React項(xiàng)目中引入國際化可以使用第三方庫來實(shí)現(xiàn)，本文主要介紹了react項(xiàng)目中如何引入國際化，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07