Después del inicio de sesión del usuario, se guarda un token de autenticación en el almacenamiento de sessionStorage y la página se vuelve a cargar. Ahora, después de la recarga, quiero leer esos datos y almacenarlos en un state pero el renderizado no cambia de <Login /> a <Layout>...
export default class Home extends React.Component<any, State> { constructor(props: any) { super(props); this.state = { auth: true, } this._auth(); } public render() { return ( <> {this.state.auth ? <Login /> : <Layout> ... </Layout> </> ) }; private _auth(): void { if (sessionStorage.getItem("accessGranted") !== "") this.setState({ auth: true }); else this.setState({ auth: false }); }No llame a
setState()enconstructor(). En cambio, si un componente necesita usar un estado local, asigne el estado inicial athis.statedirectamente en el constructor.
componentDidMount()invoca inmediatamente después de que se monta un componente. Puede llamar asetState()inmediatamente encomponentDidMount()y activa una representación adicional, pero esto sucede antes de que el navegador actualice la pantalla, llamando arender()dos veces.
Puede devolver el valor de su sessionStorage desde el método _auth y usar ese valor para crear el estado dentro del constructor, O simplemente puede llamar a this._auth dentro componentDidMount() que aún está bien pero se usa principalmente para cálculos asíncronos, efectos secundarios, etc. .