Question

我尝试从我的header component（不包括导入语句）中重新呈现state app parent component {/ p>}

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＆amp;成功登录时我也console.log user进行调试，但我没有得到所需的导航栏。这就是console logged所以我的逻辑似乎正确。我仍然是新的反应，所以我不能正确理解生命周期感谢所有的帮助

Answer 1

您没有在componentDidMount中返回用户现有案例。因此，首先它使用用户信息设置状态，然后再次将状态设置为null。所以试试这样：

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

或者您可以使用else块来处理不存在return的不存在的用户案例。但我认为这里没有必要。

反应组件不会从父组件firebase

1 个答案: