刷新后保存状态

Posted 2023-05-09

【中文标题】刷新后保存状态

【英文标题】：Save state after refresh

【发布时间】：2021-08-08 02:20:18

【问题描述】：

**当我刷新页面时，我在登录后通过节点和数据库做出了登录注销身份验证，但我的 cookie 保存状态以进行登录，但我的导航栏菜单未能显示我注销它的显示我已登录 ** 下面是我的导航栏代码---- 请任何人帮助我在我的页面中使用反应挂钩 useEffect

const RenderMenu = () => 如果（状态） 返回 （ 登出

        <DropdownItem onClick=toggle>
          <NavLink
            tag=RRNavLink
            exact
            activeClassName="active-class"
            to="../courses"
          > userName
          </NavLink>
        </DropdownItem>
      </DropdownMenu>
    </>
  );
 else 
  return (
    <>
      <DropdownMenu right>
        <DropdownItem onClick=toggle>
          <NavLink
            tag=RRNavLink
            exact
            activeClassName="active-class"
            to="../signin"
          >
            Sign in
          </NavLink>
        </DropdownItem>
        <DropdownItem divider />

        <DropdownItem onClick=toggle>
          <NavLink
            tag=RRNavLink
            exact
            activeClassName="active-class"
            to="../signup"
          >
            Sign up
          </NavLink>
        </DropdownItem>
      </DropdownMenu>
    </>
  );

;

【参考方案1】：

您的主要问题不在您的代码示例中，所以我认为您的问题是当您将身份验证状态设置为 true 时您的组件没有改变，所以这就是我想出的

export default function Rendermenu() 

  const [state, setState] = useState(authstate: false)
  const [authState, setAuthstate] = useState(false)

  const authstore = localStorage.getItem("auth");

  useEffect(() => 
    localStorage.getItem('auth')
    console.log(localStorage.getItem('auth'))
  )

  function Setauth() 
    localStorage.setItem('auth', !authState)
    setAuthstate(!authState)
    window.location.reload();
    console.log(authState)
    console.log(localStorage.getItem("auth"));
  

  function reset() 
    localStorage.clear()
    window.location.reload()
  


  if(localStorage.getItem('auth')) return (
    <div>
      <SignOut Setauth=Setauth />
      <button onClick=reset>clear</button>
    </div>
  );
  return (
    <div>
      <SignIn Setauth=Setauth />
      <button onClick=reset>clear</button>
    </div>
  );

在这个 sn-p 中，我使用了 localstorage 而不是 cookie，我发现使用本地存储更快、更容易。我使用了 js-cookies，但由于某种原因，我的 cookie 没有被初始化，所以这就是我使用 localstorage 的原因。当我尝试更新变量时，使用本地存储并没有更新 DOM，所以我认为最好的办法是从本地存储中完全清除该变量