Por lo tanto, actualmente me enfrento a un problema común en el que el valor de un estado en mi componente de clase no cambia inmediatamente, sino solo después de renderizar/actualizar la página. Tengo un estado llamado 'autorización' al que quiero atribuir el valor falso al hacer clic en 'cerrar sesión'. Cuando un usuario presiona el botón 'cerrar sesión', quiero poner inmediatamente el estado de autenticación en 'falso' y luego redirigirlo a la página de inicio de sesión. Pero mi problema es que this.state.auth sigue siendo verdadero si no se produce una actualización/renderización. Tenga en cuenta que tiene que funcionar en un componente Clase como se muestra a continuación.
import React, { Component, useEffect, useState} from 'react'; import { AuthContext } from '../Context/AuthContext'; class Home extends Component { state = { auth: true } handleLogOut = () => { localStorage.clear(); sessionStorage.clear(); this.setState({auth: false}); //Here it stays 'true' up until refresh ? this.props.history.push('/'); } render() { return ( <AuthContext.Provider value={this.state.auth}> <div> <button onClick = {this.handleLogOut}>Log out</button> </div> </AuthContext.Provider> ); } }; export default withRouter(Home);this.setState( { auth: false }, () => this.props.history.push("/") );En su caso específico, use componentDidUpdate .
Puedes usarlo como tal
componentDidUpdate(prevProps, prevState) { console.log(this.state) // Logs new state. } Sin embargo, le recomiendo que cambie a componentes funcionales, ya que componentDidUpdate y componentes similares basados en clases se consideran heredados.
Creé una pequeña demostración de sandbox para ti aquí: https://codesandbox.io/s/a-simple-react-router-v4-tutorial-forked-uznym
Su función handleLogOut leerá auth como falso hasta que React vuelva a procesar el componente. Salvo cualquier error que pueda haber ocurrido, puede registrar el estado en el método de representación y ver lo que se lee allí.
handleLogOut = () => { console.log(this.state.auth); localStorage.clear(); sessionStorage.clear(); this.setState({ auth: false }); //Here it stays 'true' up until refresh ? // this.props.history.push("/"); console.log(this.state.auth); }; render() { console.log(this.state.auth); ... }