首頁猿問處理 React...

處理 React 中的本地存儲更改以重新呈現組件

JavaScript

墨色風雨 2022-09-02 16:00:40

我的應用程序調用了第三方 api/函數，該 api/函數更改了 localStorage 變量。isUserLoggedIn是否可以在本地存儲更改時重新呈現組件？我的應用程序根據localStorage.getItem('isUserLoggedIn')<div> { localStorage.getItem('isUserLoggedIn') ? <GlobalHeader uniqueid="GlobalHeader" signoutclickhandler={this.signOutHandler} /> : <GlobalHeader uniqueid="GlobalHeader" signinclickhandler={this.signInHandler} /> } </div>

查看完整描述

3 回答

瀟瀟雨雨

TA貢獻1833條經驗獲得超4個贊

我的情況是：

我有一個函數，與后端一起工作

function callApi() {

try {

} catch() {

clearToken(); // custom func for clearing tokens

// here I need to throw out the user when token is cleared

}

我想用“useEffect”鉤子來扔掉

export function App () {

useEffect(() => {

if (!tokenFromLocalStorage) {

history.push('/login'); // react router history. url changing.

// I could not do this in the callApi func, because it would be

// neccessary to pass 'history' to the callApi as param on each calling

}

}, [tokenFromLocalStorage]);

return (<div></div>)

}

但問題是 useEffect 不會調用，因為本地存儲更改不會重新呈現應用程序。

要解決此問題，請執行以下操作：

export function App () {

useEffect(() => {

if (!tokenFromLocalStorage) {

history.push('/login');

}

}, [tokenFromLocalStorage]);

return (<div></div>)

}

function callApi() {

try {

...

} catch() {

clearToken();

window.location.reload(); // throw out on the 'login' page if there are no tokens.

// forced reload needed because changing local storage

// does not rerender application

}

目前，useEffect將起作用，并將用戶踢出。

反對回復 2022-09-02

泛舟湖上清波郎朗

TA貢獻1818條經驗獲得超3個贊

您可以在更改本地存儲時調度操作。更好的方法是創建自定義鉤子，這些鉤子將完成工作或創建類似

function setLocalStorageItem(key,value) {

dispatch(...);

localStorage.setItem(key) = value;

}

function removeLocalStorageItem(key) {

dispatch(...);

localStorage.removeItem(key);

}

反對回復 2022-09-02

慕仙森

TA貢獻1827條經驗獲得超8個贊

您只需偵聽對象上的存儲事件：每當修改 localStorage 時，都會觸發該事件。無需強制重新渲染，只需從事件中更新組件狀態：windowstorage

const [isUserLoggedIn, setIsUserLoggedIn] = useState(localStorage.getItem('isUserLoggedIn'));

useEffect(() => {

const onStorage = () => {

setIsUserLoggedIn = localStorage.getItem('isUserLoggedIn');

};

window.addEventListener('storage', onStorage);

return () => {

window.removeEventListener('storage', onStorage);

};

}, []);

return (

<div>

{

isUserLoggedIn ?

<GlobalHeader

uniqueid="GlobalHeader"

signoutclickhandler={this.signOutHandler}

<GlobalHeader

uniqueid="GlobalHeader"

signinclickhandler={this.signInHandler}

}

</div>

)

反對回復 2022-09-02

3 回答
0 關注
121 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

處理 React 中的本地存儲更改以重新呈現組件

處理 React 中的本地存儲更改以重新呈現組件

3 回答

添加回答