useEffect 不监听 localStorage

Question

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

我正在尝试使用 useEffect 监听 localStorage 值，但登录后我得到“未定义”。 当 localStorage 值更新时，useEffect 不会再次运行，并且 Spinner 会一直旋转。

我试过这样做： JSON.parse(localStorage.getItem('userData')) ，但后来我得到了一个 useEffect 无限循环。

只有当我刷新页面时，我的 localStorage 值才会出现，并且我可以显示它而不是 Spinner。

我做错了什么？

准备好后，也许有更好的方法来加载 userData ？

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

感谢您的回答；）

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;

Answer 1

最好在此处为 localstorage 添加事件侦听器。

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

    if (item) {
      setUserData(item)
    }
  }

  window.addEventListener('storage', checkUserData)

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

Answer 2

解决方案是使用这种结构：

useEffect(() => {
// Other functions

window.addEventListener("storage", () => {
  // When storage changes refetch
  refetch();
});
return () => {
  // when the component unmounts remove the event listener
  window.removeEventListener("storage");
};

}, []);

Answer 3

“存储”事件的事件侦听器在同一页面中不起作用

Window 接口的存储事件在另一个文档的上下文中修改了存储区域 (localStorage) 时触发。

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

Answer 4

• “也许有更好的方法在准备好后加载 userData？”

您可以将值直接评估为 localStorage，而不是传递给 state。

const Main = () => {
  if (localStage.getItem('userData')) {
    return (<Navbar />);
  }
  else {
    return (<Spinner />);
  }
};

如果需要在更多组件中检索userData ，请评估 Redux 对您的应用程序的实现，这可以消除 localStorage 的使用，但当然，这取决于您的需要。