刷新后保存状态

如何解决刷新后保存状态

**我在登录后通过节点和数据库进行了登录注销身份验证，当我刷新页面时，我的 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>
    </>
  );
}

};

解决方法

您的主要问题不在您的代码示例中，所以我认为您的问题是当您将身份验证状态设置为 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>
  );
}

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