Firebase身份验证和状态问题

Question

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

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;

我遇到一个奇怪的错误，并相信我这样做的方式是错误的。 用户成功通过身份验证后，将保存所有信息并写入用户的email 。 控制台日志如下所示： User is already logged in. address@email.com // corresponds to authData["google"]["email"] address@email.com // corresponds to this.state.email = CORRECT!!

但是，当我刷新页面时，新的打印看起来像这样，看来电子邮件和对象仍然对我可用，但没有保存在this.state 。 User is already logged in. address@email.com // corresponds to authData["google"]["email"] null

我目前正在学习React，所以这可能是一个非常简单的错误。 非常感谢您的宝贵时间和事先的帮助。 如果您能为我指明正确的方向，或者让我知道一种更好的方法，我将不胜感激。 谢谢！

Answer 1

我相信我找到了问题的原因。 当我在render()调用以下代码时

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

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

Answer 2

您编写的代码错误。 var currentAuthData = this.ref.getAuth(); 向fireBase发送请求以获取身份验证，但是if (currentAuthData) { currentAuthData if (currentAuthData) {在fireBase可以检索正确的信息之前运行，则下一行代码。 您必须改为使用回调函数。

ref.onAuth(authDataCallback);

function authDataCallback(authData) {
  if (authData) {
    console.log('User is already logged in.');
  }
}