javascript - react 组件不会在父组件 firebase 的状态更改时重新渲染

Question

我正在尝试重新渲染我的 header component基于state来 self 的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所以我的逻辑似乎是正确的。我对 react 还很陌生，所以我没有正确理解生命周期，感谢所有帮助

Answer 1

您不会在 componentDidMount 中返回用户现有的情况。因此，首先它使用用户信息设置状态，然后再次使用 null 设置状态。所以尝试这样:

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

或者您可以对不存在的用户案例使用 else block ，而无需 return。但我认为这里没有必要。