Реакция компонента не повторная рендеринг при изменении состояния из родительского компонента

Question

я пытаюсь перерисовать мои header component на основе state из моего app parent component (не включая операторы импорта)

header.js

export default class Header extends React.Component {
  constructor(props) {
    super(props);
    console.log('im inside header component');
    console.log(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    if ( this.props.user ) {
      return (
        <Navbar color="light" light expand="md">
          <Link to="/"> raffleraffleraffle </Link>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <Link to="/register">Welcome user</Link>
                <button onClick={this.props.signout}>Signout</button>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      );
    }
    return (
      <Navbar color="light" light expand="md">
        <Link to="/">raffleraffleraffle</Link>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem>
              <Link to="/register">Sign up</Link>
            </NavItem>
            <NavItem>
              <Link to="/login">Sign in</Link>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    );
  }
}

в моем header component constructor у меня есть 2 console.logs для целей отладки.

app.js

class App extends Component {
  constructor(props) {
    super(props);

    this.signout = this.signout.bind(this);
    this.state = {
      user: null,
    }
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      console.log(user);
      if (user) {
        this.setState({ user })
      }
      this.setState({ user: null })
    });
  }

  signout() {
    firebase.auth().signOut().then(function () {
      console.log('succesfully signed out');
      this.setState({ user: null })
    }).catch(function (error) {
      // An error happened.
    });
  }

  render() {
    return (
      <Router>
        <div>
          <Header user={this.state.user} signout={this.signout} />
          <Container fluid>
            <Route exact path="/" component={RaffleCardView} />
            <Route exact path="/raffleview" component={RaffleView} />
            <Route exact path="/login" component={LoginView} />
            <Route exact path="/register" component={RegisterView} />
          </Container>
        </div>
      </Router>
    )
  }
};
export default App;

в моем app component constructor им настройке this.state.user = null в моем componentDidMount методе им устанавливаю user state всякий раз, когда я получаю успешный вход в систему с firebase &Я также console.log user для отладки, но я не получаю нужную панель навигации.вот что значит console logged, поэтому моя логика кажется правильной.я все еще новичок, чтобы реагировать, поэтому я не понимаю жизненный цикл должным образом, спасибо за помощь

Answer 1

Вы не возвращаете свой существующий пользовательский случай в свой componentDidMount.Итак, сначала он устанавливает состояние с пользовательской информацией, затем снова устанавливает состояние с нулем.Поэтому попробуйте так:

componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      console.log(user);
      if (user) {
        return this.setState({ user })
      }
      this.setState({ user: null })
    });
  }

или вы можете использовать блок else для несуществующего пользовательского случая без return.Но я думаю, что в этом нет необходимости.