处理 React 中的本地存储更改以重新呈现组件

Question

我的应用程序调用了第三方 api/函数，该 api/函数更改了 localStorage 变量。isUserLoggedIn

是否可以在本地存储更改时重新呈现组件？我的应用程序根据localStorage.getItem('isUserLoggedIn')

<div>

        {

        localStorage.getItem('isUserLoggedIn') ?

        <GlobalHeader

          uniqueid="GlobalHeader"            

          signoutclickhandler={this.signOutHandler}

        />

        :

        <GlobalHeader

          uniqueid="GlobalHeader"    

          signinclickhandler={this.signInHandler}

        />

        }

      </div>

Answer 1

我的情况是：我有一个函数，与后端一起工作function callApi() {&nbsp; try {} catch() {&nbsp; &nbsp; clearToken(); // custom func for clearing tokens&nbsp; &nbsp;// here I need to throw out the user when token is cleared}}我想用“useEffect”钩子来扔掉&nbsp; &nbsp; export function App () {&nbsp; &nbsp; &nbsp; &nbsp;useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (!tokenFromLocalStorage) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; history.push('/login'); // react router history. url changing.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // I could not do this in the callApi func, because it would be&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// neccessary to pass 'history' to the callApi as param on each calling&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, [tokenFromLocalStorage]);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; return (<div></div>)&nbsp; &nbsp; }&nbsp;&nbsp;但问题是 useEffect 不会调用，因为本地存储更改不会重新呈现应用程序。要解决此问题，请执行以下操作：export function App () {&nbsp; &nbsp; &nbsp; &nbsp;useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (!tokenFromLocalStorage) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; history.push('/login');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, [tokenFromLocalStorage]);&nbsp; &nbsp; return (<div></div>)&nbsp; &nbsp; }function callApi() {&nbsp; try {&nbsp; &nbsp;...} catch() {&nbsp; &nbsp; clearToken();&nbsp; &nbsp; window.location.reload(); // throw out on the 'login' page if there are no tokens.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // forced reload needed because changing local storage&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // does not rerender application&nbsp; }}目前，useEffect将起作用，并将用户踢出。

Answer 2

您可以在更改本地存储时调度操作。更好的方法是创建自定义钩子，这些钩子将完成工作或创建类似function setLocalStorageItem(key,value) {&nbsp; &nbsp; &nbsp;dispatch(...);&nbsp; &nbsp; &nbsp;localStorage.setItem(key) = value;}function removeLocalStorageItem(key) {&nbsp; &nbsp; &nbsp;dispatch(...);&nbsp; &nbsp; &nbsp;localStorage.removeItem(key);}

Answer 3

您只需侦听对象上的存储事件：每当修改 localStorage 时，都会触发该事件。无需强制重新渲染，只需从事件中更新组件状态：windowstorageconst [isUserLoggedIn, setIsUserLoggedIn] = useState(localStorage.getItem('isUserLoggedIn'));useEffect(() => {&nbsp; &nbsp; const onStorage = () => {&nbsp; &nbsp; &nbsp; &nbsp; setIsUserLoggedIn = localStorage.getItem('isUserLoggedIn');&nbsp; &nbsp; };&nbsp; &nbsp; window.addEventListener('storage', onStorage);&nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; &nbsp; window.removeEventListener('storage', onStorage);&nbsp; &nbsp; };}, []);return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; isUserLoggedIn ?&nbsp; &nbsp; &nbsp; &nbsp; <GlobalHeader&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uniqueid="GlobalHeader"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; signoutclickhandler={this.signOutHandler}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; :&nbsp; &nbsp; &nbsp; &nbsp; <GlobalHeader&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uniqueid="GlobalHeader"&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; signinclickhandler={this.signInHandler}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </div>)