React（Firebase）の状態を更新しました。未定義値

Question

Firebaseを使用してログインページを作成しています。ユーザーがログインするとすぐに、 "auth"、firebaseは "logged"のコンポーネント状態をTrueまたはFalseに設定するかどうかを知らせるために使用している "user"変数を返します。

auth関数は正しい "loggedin"と "loggedout" console.logメッセージを返しています。しかし、setStateに到達すると、何も起こりません。私が再レンダリングすると、私が最初に作成したloggedIn状態（Trueのどちらかにする必要があります）は「未定義」です。これは私を混乱させます。

class Navigation extends React.Component { 
 
    static propTypes = { 
 
    className: PropTypes.string, 
 
    }; 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     loggedIn: false 
 
    } 
 
    } 
 

 
    componentDidMount() { 
 
    firebase.auth().onAuthStateChanged(function(user) { 
 
     if (user) { 
 
     console.log("USER LOGGED IN :) Nav.js") 
 
     console.log(user.email) 
 
     this.setState({ 
 
      loggedIn: true 
 
     }); 
 
     } else { 
 
     console.log("NOBODY'S HERE Nav.js") 
 
     this.setState({ 
 
      loggedIn: false 
 
     }); 
 
     // do not change state 
 
     } 
 
    }.bind(this)); 
 
    } 
 

 
    render() { 
 
    console.log("CUR STATE: ", this.state.isLoggedIn) 
 
    return (
 
     <div className={cx(s.root, this.props.className)} role="navigation"> 
 
     <Navbar isLoggedIn={this.state.isLoggedIn}/> 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 1

あなたのNavBar -componentに間違った状態変数を渡しています。

this.setState({ 
    loggedIn: false 
}); 

をが、レンダリング機能では、このようにそれを使用しようとしている：あなたはこのようなあなたの状態を設定しているisLoggedIn={this.state.isLoggedIn}

は、これは次のようになります。代わりにisLoggedIn={this.state.loggedIn}。