Estoy tratando de llamar a la función onLogin() desde un niño llamado Login. Esta función establecerá el estado en función del cual se realiza la representación condicional.
El problema es que Home no se procesa después de llamar a setState. De hecho, no se llama a la función getView() después de llamar a setState(), aunque la vista se actualiza después de actualizar la página.
class App extends React.Component { constructor(props) { super(props); this.onLogin.bind(this); this.state = {userLoggedIn: !!localStorage.getItem(USER_NAME)}; } onLogin() { this.setState({userLoggedIn: true}); } getView() { return this.state.userLoggedIn ? <Home /> : <Login onLogin={this.onLogin} />; } render() { return ( <span> {this.getView()} </span> ); } }Debe agregar .bind(this) donde pasa el accesorio al componente de inicio de sesión de esta manera:
<Login onLogin={this.onLogin.bind(this)} /> y puede eliminar la línea después de super(props); Aquí hay un enlace a codesandbox: https://codesandbox.io/s/boring-chaum-5l8k6?file=/src/App.js
Parece que no ha vinculado el método getView como lo hizo para onLogin . Para evitar problemas de vinculación, tal vez solo use funciones de flecha como esta
class App extends React.Component { constructor(props) { super(props); this.state = {userLoggedIn: !!localStorage.getItem(USER_NAME)}; } const onLogin = () => { this.setState({userLoggedIn: true}); } const getView = () => { return this.state.userLoggedIn ? <Home /> : <Login onLogin={this.onLogin} />; } render() { return ( <span> {this.getView()} </span> ); } }