javascript - 使用 React 组件登录 Firebase

Question

基本思想是在 React 中创建一个 Firebase 登录。

组件呈现自身，但它们没有协同工作。主要问题是在调用 onAuthStateChanged() 方法后，渲染函数不采用 «new» 状态。我究竟做错了什么？

非常感谢你们!

var Login = React.createClass ({

  getInitialState: function(){
        return { loggedIn: 'false' };
    },

    handleLogIn: function(event){

      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;

      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        // ERROR HANDLING
        var errorCode = error.code;
        var errorMessage = error.message; 

        // [... error handling ...]   

      });

      this.setState({ loggedIn: 'true' });

    },

  authenticateUser: function(x){

    // INITIALIZATION
    var config = {
      [ ... config stuff ... ]
    };
    firebase.initializeApp(config);

    //CHECKING IF SIGNED IN
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // USER IS SIGNED IN
        console.log('authenticateUser(): true');
        this.setState({ loggedIn: 'true' });
      }
      else {
        // USER IS SIGNED OUT
        console.log('authenticateUser(): false');
        this.setState({ loggedIn: 'false' });
      }
    });
  },

  whichWindowToShow: function() {
    if (this.state.loggedIn === 'unknown'){
      return (
        <div>
        <Loading type='bubbles' color='#e3e3e3' />
        </div>
      );
    }
    else if (this.state.loggedIn === 'true'){
      return (
        <div>
        <Backend />
        </div>
      );
    }
    else {
      return (
        <div className="login_wrapper">
        <div className="login_box">
        <h1>Member Login</h1>
          <div className="login_fields">
            <input type="text" id="email" name="email" placeholder="mail"/>
            <input type="password" id="password" name="password" placeholder="password"/>
            <button id="signin" name="signin" onClick={this.handleLogIn}>Login</button>
          </div>
        </div>
        </div>
      );
    }
  },

  render: function() {
    this.authenticateUser();
    return (
      <div>
        { this.whichWindowToShow() }
      </div>
    );
  }
}); // END LOGIN

Answer 1

对于所有有同样问题/挑战的人:

这将起作用(.bind(this) 确实修复了范围)。

也应该应用于所有其他 Firebase 监听器(例如 .on("value"))

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    this.setState({ loggedIn: "true" });
  }
  else {
    this.setState({ loggedIn: "false" });
  }
}.bind(this));