Quiero que el botón de cierre de sesión aparezca solo cuando el usuario haya iniciado sesión. Ahora funciona, pero no como debería.
Con el siguiente código, el botón de cierre de sesión aparece cuando el usuario inicia sesión solo si la página se actualizó. Esto se debe a que al cargar el componente <App/> , el componente <Navbar/> se montó junto con él.
Pero, ¿cómo puedo hacer que incluso si <Navbar/> está cargado, todavía puede ser posible manipular cuándo puede aparecer el botón en función de si el token de autenticación no es nulo?
Aquí está App.js:
const App = () => { let [logoutButtonFlag, setLogoutButtonFlag] = useState(false); let authToken = localStorage.getItem('token'); useEffect(() => { if (authToken !== null) { setLogoutButtonFlag(true); } }, [authToken]); return ( <> <Navbar logoutButtonFlag={logoutButtonFlag}/> </> ); } export default App;Aquí está Navbar.js:
const Navbar = (props) => { return ( {!props.logoutButtonFlag ? null : <button className="learn-more">Logout</button>} ); }; export default Navbar;está proporcionando una variable que no es de estado a la lista de estados que useEffect hook 'escucha', por lo que no se ejecutará nuevamente después de cambiar su valor.
const [authToken, setAuthToken] = useState(localStorage.getItem('token')); y cuando actualice el "token" de almacenamiento local, también actualice authToken al mismo valor. y su useEffect se reactivará en el cambio de authToken porque ahora es un estado
useEffect(() => { if (authToken !== null) { setLogoutButtonFlag(true); } }, [authToken]);La razón por la que solo se actualizó al actualizar se debe a que el valor del "token" en el almacenamiento local ya se modificó.