刷新后保存状态答案

【问题标题】：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>
    </>
  );
}

};

【问题讨论】：

标签： reactjs react-hooks frontend use-effect savestate

【解决方案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，所以我认为最好的办法是从本地存储中完全清除该变量

【讨论】：