时间戳

首页 > 解决方案 > 登录/注销按钮重新呈现

reactjs - 登录/注销按钮重新呈现

问题描述

我正在尝试更改登录/注销按钮的状态而不刷新导航上的页面。我使用 useContext 进行状态管理。我写的代码不断地自动改变按钮的状态。我想知道为什么会这样。

  1. 上下文 API
export function LoginContextProvider({ children }) {
  const [loggedin, setLoggedin] = useState(false);

  return (
    <LoginContext.Provider value={{ loggedin, setLoggedin }}>
      {children}
    </LoginContext.Provider>
  );
}
  1. 导航.js
const token = localStorage.getItem('access_token');
  const removeToken = () => {
    localStorage.removeItem('access_token');
  };

  const { loggedin, setLoggedin } = useLoginContext();

  useEffect(() => {
    setLoggedin(!loggedin);
  }, [token, loggedin, setLoggedin]);

return (
...
<NavRight> 
  {loggedin ? (
    <NavSigninBtn
      onClick={() => {
        removeToken();
      }}
    >
    Logout
    </NavSigninBtn>
  ) : (
    <NavSigninBtn
      onClick={() => {
        history.push('/signin');
      }}
    >
      Login
   </NavSigninBtn>
  )}
</NavRight>
)

标签： reactjs

解决方案

您在 useEffect 中无限重置登录的值。完全删除您的 useEffect ，而是在您的渲染方法中执行此操作：

<NavRight>
  <NavSigninBtn
    onClick={() => {
      if(!!token){
        removeToken();
      } else {
        history.push('/signin');
      }
    }}
  >
    {!!token ? "Logout" : "Login"}
  </NavSigninBtn>
</NavRight>

推荐阅读