首页 文章

React（Firebase）未定义值中的更新状态

提问于
浏览 次
1

我正在使用Firebase创建登录页面 . 一旦用户登录，“auth”，firebase就会返回一个“user”变量，我用它来告诉我是否将“loggedIn”的组件状态设置为True或False .

auth函数返回正确的“loggedin”和“loggedout”console.log消息 . 但是当它到达setState时，我不确定是否会发生任何事情 . 当我重新渲染时，我最初创建的loggedIn状态（应该是True of False）是“未定义”，这让我感到困惑 .

class Navigation extends React.Component {
  static propTypes = {
    className: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      loggedIn: false
    }
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log("USER LOGGED IN :) Nav.js")
        console.log(user.email)
        this.setState({
          loggedIn: true
        });
      } else {
        console.log("NOBODY'S HERE Nav.js")
        this.setState({
          loggedIn: false
        });
        // do not change state
      }
    }.bind(this));
  }

  render() {
    console.log("CUR STATE: ", this.state.isLoggedIn)
    return (
      <div className={cx(s.root, this.props.className)} role="navigation">
        <Navbar isLoggedIn={this.state.isLoggedIn}/>
      </div>
    );
  }
}
authentication reactjs firebase redux setstate

1 回答

  • 1

    您将错误的状态变量传递给 NavBar -component . 你正在设置这样的状态：

    this.setState({
  loggedIn: false
});

    但是在渲染函数中尝试使用它： isLoggedIn={this.state.isLoggedIn}

    这应该是： isLoggedIn={this.state.loggedIn} 而不是 .

    回复于

相关问题