@AlllLlllA

Как обновить дочернюю компоненту react из дочерней компоненты?

Здравствуйте, у меня есть 3 компоненты, главная App.js, где есть state и route:
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      logged: false
    }
  }
  async LogOrLogout(loggin){
    await this.setState({logged: loggin});
    console.log(this.state);
  }
  render(){
    return (
      <BrowserRouter>
        <div className="app">
          {(this.state.logged) ? <HeaderComponent logged={true}/> : <HeaderComponent logged={false}/>}
          <Route exact path='/' component={MainPageUnLogComponent}/>
          <Route path='/main-menu' component={MainPageLogComponent}/>
          <Route path='/login' component={() => <LoginComponent login={loggin => this.LogOrLogout(loggin)}/>}/>
          <Route path='/registration' component={RegisterComponent}/>
        </div>
      </BrowserRouter>
    );
  }
}

Есть так же header компонента, которая принимает значение this.state.logged и на основе этого меняет свои теги, есть ещё компонента login, откуда я хочу менять state в app.js, чтобы менялся header (в моём видении это должно было быть так: авторизуюсь, header меняется), но при изменении this.state.logged (c false на true), header не меняется, я понял в чём причина, ведь он отрисовался вначале и не отрисовывался больше, как мне сделать так, что бы после изменения state в app.js перерисовывался header?
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@Alexandroppolus
кодир
header не меняется, я понял в чём причина, ведь он отрисовался вначале и не отрисовывался больше
вообще-то он должен меняться, в этом суть реакта

замени идиотский тернарник на < HeaderComponent logged={this.state.logged}/ > . Не факт, что это поможет, конечно. Проблема где-то ещё. console.log точно срабатывает?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы