Question

基本想法是在React中进行Firebase登录。

组件呈现自己，但它们不能一起工作。主要问题是在调用onAuthStateChanged（）方法之后，render函数不采用«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));

使用React组件登录Firebase

1 个答案: