Question

我是学习React的学生。我正在尝试创建一个网络应用，用户必须先登录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>

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

Answer 2

你写错了代码。 if (currentAuthData) {向fireBase发送请求以获取身份验证，但是在fireBase可以检索正确信息之前运行下一行代码ref.onAuth(authDataCallback); function authDataCallback(authData) { if (authData) { console.log('User is already logged in.'); } }。您必须使用回调函数。

Gemfile

Firebase身份验证和状态问题

2 个答案: