así que estoy creando mi primer sitio web fullstack y una vez que un usuario inicia sesión, se almacena en el almacenamiento local y quiero mostrar el nombre del usuario en mi encabezado una vez que haya iniciado sesión, pero mi encabezado no se vuelve a representar, así que no pasa nada: este es el encabezado antes de iniciar sesión en el encabezado
y así es como quiero que sea después de iniciar sesión: encabezado después de iniciar sesión, este es mi código de diseño:
import "../assets/sass/categoriesbar.scss"; import Header from "./Header/Header"; const Layout = (props) => { return ( <> <Header/> <main> { props.children} </main> </> ); } export default Layout;y esta es la barra de herramientas en mi encabezado:
const ToolBar = () => { const history = useHistory(); let currentUser= JSON.parse(localStorage.getItem("user-info")); const logoutHandler = () => { localStorage.clear("user-info"); history.push("/login"); }; return ( <> <div className={classes.NavigationBar}> <h1> <Link to="/">Pharmashop</Link> </h1> <NavLinks logout={logoutHandler}/> {localStorage.getItem("user-info")? <h5>Welcome {currentUser.name} !</h5> : <RegisterButton /> } </div> </> ); }; export default ToolBar;por favor ayúdenme es frustrante
PD: esta es mi primera pregunta de stackoverflow, lo siento si está desorganizada y poco clara, y lo siento por mi mal inglés.
Hazem, bienvenido a Stack Overflow.
En reacción, si desea que el componente se vuelva a procesar cuando cambien algunos datos, esa información debe estar en el estado del componente. En su código, el usuario actual es una constante, no se vincula al estado del componente. Así es como podría volver a renderizarse automáticamente cuando el usuario inicia sesión:
const ToolBar = () => { const [currentUser, setCurrentUser] = useState(JSON.parse(localStorage.getItem("user-info"))); const logoutHandler = () => { localStorage.clear("user-info"); history.push("/login"); }; return ( <> <div className={classes.NavigationBar}> <h1> <Link to="/">Pharmashop</Link> </h1> <NavLinks logout={logoutHandler}/> {currentUser? <h5>Welcome {currentUser.name} !</h5> : <RegisterButton /> } </div> </> ); }; export default ToolBar;Ver más sobre el estado en la documentación oficial .