javascript - Firebase 身份验证和状态问题

Question

我是一名正在学习 React 的学生。我正在尝试创建一个网络应用程序，用户在查看任何内容之前必须使用 Google 登录。我从 github-notetaker 示例中的代码开始，并编辑了 Main.js。到目前为止，我正在 init() 方法中编写整个逻辑，并在 this.state< 中设置 loggedIn 和 email 值。

import React from 'react';
import { RouteHandler } from 'react-router';
import Rebase from 're-base';

class Main extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loggedIn: props.loggedIn,
      email: props.email
    };
  }

  authDataCallback(authData) {
    if (authData) {
      console.log('User is already logged in.');
      console.log(authData["google"]["email"]); // works as expected
      this.setState({
        loggedIn: true,
        email: authData["google"]["email"]
      });
      console.log(this.state.email); // does not work as expected
    } else {

      this.setState({
        loggedIn: false
      });
      console.log('Attempting to authenticate user account');
      this.ref.authWithOAuthPopup('google', function (error, authData) {
        if (error) {
          console.log('Login Failed!', error);
        } else {
          console.log('Authenticated successfully');
        }
      }, {
        scope: "email"
      });
    }
  }
  init(){
    console.log('Init called');
    this.ref = new Firebase('https://myapp.firebaseio.com/');
    this.ref.onAuth(this.authDataCallback.bind(this));
  }

  componentWillMount(){
      this.router = this.context.router;
  }
  componentDidMount(){
    this.init();
  }
  componentWillReceiveProps(){
    this.init();
  }
  render(){
    if (!this.state.loggedIn) {
      return (
        <div className="main-container">
          <div className="container">
            <h3>You are not authenticated. <a href="">Login</a></h3>
          </div>
        </div>
      )
    } else {
      return (
        <div className="main-container">
          <div className="container">
            <RouteHandler {...this.props}/>
          </div>
        </div>
      )
    }
  }
};
Main.propTypes = {
  loggedIn: React.PropTypes.bool,
  email: React.PropTypes.string
};
Main.defaultProps = {
  loggedIn: false,
  email: ''
}
Main.contextTypes = {
  router: React.PropTypes.func.isRequired
};
export default Main;

我遇到了一个奇怪的错误，并相信我这样做的方式是错误的。当用户身份验证成功后，所有信息都会被保存并写入用户的电子邮件。控制台日志如下所示:
用户已经登录。
address@email.com//对应于 authData["google"]["email"]
address@email.com//对应于 this.state.email = 正确!!


但是，当我刷新页面时，新打印看起来像这样，并且电子邮件和对象似乎仍然可供我使用，但没有保存在 this.state 中。
用户已经登录。
address@email.com//对应于 authData["google"]["email"]
无效的


我目前正在学习 React，所以这可能是一个非常简单的错误。非常感谢您提前抽出时间并提供帮助。如果您能指出正确的方向或让我知道更好的方法来做到这一点，我将非常感激。谢谢!

Answer 1

我相信我找到了问题的原因。当我在 render()

中调用以下代码时

<h1> {this.state.email} </h1>

它工作得很好。因此，我的结论是 console.log(this.state.email) 在 this.setState() 完全完成之前以某种方式运行。