1

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

auth 函数返回正确的“loggedin”和“loggedout”console.log 消息。但是，当它到达 setState 时，我不确定会发生什么。当我重新渲染时，我最初创建的登录状态（应该是 True 或 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>
    );
  }
}

4

1 回答 1

1

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

this.setState({
  loggedIn: false
});

但试图在渲染函数中像这样使用它：isLoggedIn={this.state.isLoggedIn}

这应该是：isLoggedIn={this.state.loggedIn}相反。

于 2016-12-23T00:54:37.027 回答