ファイヤーベースログイン：反応コンポーネント

Question

基本的な考え方は、FirebaseログインをReactにすることです。

コンポーネント自体はレンダリングされますが、それらは一緒に動作していません。主な問題は、レンダリング関数が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

、

これはULTIMATE FINAL溶液（.bind（これは）作業を行う）です。

（例えば.on（ "値"））他のすべてのFirebaseのリスナーにもに適用されるべきである

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