Блог

Я пытаюсь изменить состояние кнопки входа/выхода без обновления страницы в навигаторе. Я использовал useContext для управления состоянием. Код, который я написал, автоматически изменяет состояние кнопки. Я хочу знать, почему это происходит.

1. Контекстный API

 export function LoginContextProvider({ children }) {  const [loggedin, setLoggedin] = useState(false);   return (  lt;LoginContext.Provider value={{ loggedin, setLoggedin }}gt;  {children}  lt;/LoginContext.Providergt;  ); }  

2. Nav.js

 const token = localStorage.getItem('access_token');  const removeToken = () =gt; {  localStorage.removeItem('access_token');  };   const { loggedin, setLoggedin } = useLoginContext();   useEffect(() =gt; {  setLoggedin(!loggedin);  }, [token, loggedin, setLoggedin]);  return ( ... lt;NavRightgt;   {loggedin ? (  lt;NavSigninBtn  onClick={() =gt; {  removeToken();  }}  gt;  Logout  lt;/NavSigninBtngt;  ) : (  lt;NavSigninBtn  onClick={() =gt; {  history.push('/signin');  }}  gt;  Login  lt;/NavSigninBtngt;  )} lt;/NavRightgt; )  

Вы бесконечно сбрасываете значение loggedin в своем эффекте использования. Полностью удалите эффект использования и вместо этого сделайте это в своем методе визуализации:

 lt;NavRightgt;  lt;NavSigninBtn  onClick={() =gt; {  if(!!token){  removeToken();  } else {  history.push('/signin');  }  }}  gt;  {!!token ? "Logout" : "Login"}  lt;/NavSigninBtngt; lt;/NavRightgt;  

Проблема заключается в вашем крючке useEffect.Ваш эффект использования зависит от двух переменных и функции setstate.Если у вас есть состояние и setstate в качестве зависимости, то useEffeect будет вызван дважды один раз для состояния и другой для setdstate.Поэтому удалите зависимости .Сохраните токен в качестве единственной зависимости.