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.

我做错了什么?

也许有更好的方法在 userData 准备好后加载它?

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;

推荐答案

最好在这里为 localstorage 添加一个事件监听器.

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屋！