相关疑难解决方法(0)

我正在制作一个身份验证系统，在后端将我重定向到前端页面后，我正在为 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 …

我试图覆盖点表示法访问localStorage.我已经设法覆盖了getItem和setItem方法,如下所述:是否可以在HTML5中单独覆盖本地存储和会话存储？

现在我尝试创建一个代理来捕获点访问,但因为我似乎无法覆盖localStorage对象,因为这里尝试

localStorage  = new Proxy(localStorage, {
get: function(target, name) {
    if (!(name in target)) {
        console.log("Getting non-existent property '" + name + "'");
        return undefined;
    }
    return '123';
},
set: function(target, name, value) {
    if (!(name in target)) {
        console.log("Setting non-existent property '" + name + "', initial value: " + value);
    }
    target[name] = value;
}
});

现在,当我尝试它时,我仍然得到测试而不是123:

localStorage.testKey = "test";
alert(localStorage.testKey)