useEffect不监听localStorage [英] useEffect does not listen for localStorage

问题描述

我正在制作一个身份验证系统，后端将我重定向到前端页面后，我正在向userData发出API请求，并将该数据保存到localStorage中.然后，我尝试加载Spinner或UserInfo.

I'm making an authentication system and after backend redirects me to the frontend page I'm making API request for userData and I'm saving that data to localStorage. Then I'm trying to load Spinner or UserInfo.

我试图用useEffect监听localStorage的值，但是登录后我得到的是未定义".更新localStorage值后，useEffect不会再次运行，并且Spinner会永远旋转.

I'm trying to listen for the localStorage value with useEffect, but after login I'm getting 'undefined'. When the localStorage value is updated useEffect does not run again and Spinner keeps spinning forever.

我尝试做: JSON.parse(localStorage.getItem('userData'))，但是随后我得到了useEffect无限循环.

I have tried to do: JSON.parse(localStorage.getItem('userData')), but then I got a useEffect infinite loop.

仅当刷新页面时，才会显示localStorage值，并且可以显示它而不是Spinner.

Only when I'm refreshing the page does my localStorage value appear and I can display it instead of Spinner.

我做错了什么?

也许有更好的方法可以在用户数据准备好后加载它?

Maybe there is a better way to load userData when it's ready?

我正在尝试以正确的方式更新DOM?

I'm trying to update DOM in correct way?

感谢您的回答;)

import React, { useState, useEffect } from 'react';
import { Spinner } from '../../atoms';
import { Navbar } from '../../organisms/';
import { getUserData } from '../../../helpers/functions';

const Main = () => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    setUserData(localStorage.getItem('userData'));
  }, [localStorage.getItem('userData')]);

  return <>{userData ? <Navbar /> : <Spinner />}</>;
};

export default Main;

推荐答案

最好在此处为本地存储添加事件监听器.

It would be better to add an event listener for localstorage here.

useEffect(() => {
  function checkUserData() {
    const item = localStorage.getItem('userData')

    if (item) {
      setUserData(item)
    }
  }

  window.addEventListener('storage', checkUserData)

  return () => {
    window.removeEventListener('storage', checkUserData)
  }
}, [])

这篇关于useEffect不监听localStorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！