Question

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

我正在尝试使用useEffect监听localStorage的值，但是登录后却出现了“ undefined”。更新localStorage值后，useEffect不会再次运行，并且Spinner会永远旋转。

我尝试做：JSON.parse(localStorage.getItem('userData'))，然后得到了useEffect不定式循环。

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

我做错了什么？

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

我正在尝试以正确的方式更新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

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

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

    if (item) {
      setUserData(item)
    }
  }

  window.addEventListener('storage', checkUsetData)

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

Answer 2

'storage' 事件的监听器在同一个页面中不起作用

<块引用>

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

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

Answer 3

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

useEffect(() => {
// Other functions

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

}, []);

Answer 4

“也许有一种更好的方法可以在用户数据准备就绪时加载它？”

您可以将值直接评估到localStorage中，而不是传递给状态。

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

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

useEffect不监听localStorage

4 个答案: