は、私は、このチュートリアルに従うことをしようとしているreactjsとfirebase

Question

でシンプルなログインページを設定しますデモを実行する。これは私が現時点で持っているものです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import firebase from 'firebase'; 
import reactfire from 'reactfire'; 

var config = { 
apiKey: "legitimate value", 
authDomain: "legitimate value", 
databaseURL: "legitimate value", 
storageBucket: "legitimate value", 
messagingSenderId: "legitimate value" 
}; 
firebase.initializeApp(config); 
var provider = new firebase.auth.FacebookAuthProvider(); 
this.state = {user: null}; 

loginWithFacebook() { 
    firebase.auth().signInWithPopup(provider).then(function(result) { 
    var token = result.credential.accessToken; 
    this.setState({user: result.user}); 
}.bind(this)); 
} 

logOut() { 
    firebase.auth().signOut().then(function() { 
    this.setState({user: null}); 
}.bind(this)); 
} 

const user = this.state.user; 
render() { 
    return(
    <div> 
    <p>Hi, {user.displayName}!</p> 
    <button onClick={this.loginWithFacebook.bind(this)}>Login with Facebook</button><button onClick={this.logOut.bind(this)}>Log Out</button> 
</div> 
) 
}; 

ReactDOM.render(
<h1>Hello world!</h1>, 
document.getElementById('root') 
); 

これを取得して実行するためのアイデアは何ですか？私の現在のエラーは、loginWithFacebook()、logOut()、およびrender()の関数に関する構文上の問題です。私はこれらの機能の前にfunctionキーワードを入れてみましたが、this.setStateが実行しようとするたびに私は未定義のエラーを受けていました。

私のすべての問題を解決する方法を見つけた後、私はデモを動作させることができました。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import firebase from 'firebase'; 
import reactfire from 'reactfire'; 

export class App extends React.Component { 

constructor(){ 
super(); 

this.state = {user: null, isLoggedIn: false}; 
} 

loginWithFacebook() { 
     firebase.auth().signInWithPopup(provider).then(function(result) { 
     var token = result.credential.accessToken; 
     this.setState({user: result.user, isLoggedIn: true}); 
     }.bind(this)); 
    }; 

    logOut() { 
    firebase.auth().signOut().then(function() { 
     this.setState({user: null, isLoggedIn: false}); 
    }.bind(this)); 
    }; 

    render() { 
    const currentState = this.state; 
    return(
     <div> 
     <p>Hi! {currentState.isLoggedIn ? currentState.user.displayName : ''}</p> 
     <button onClick={this.loginWithFacebook.bind(this)}>Login with Facebook</button><button onClick={this.logOut.bind(this)}>Log Out</button> 
     </div> 
    ) 
    }; 
} 

var config = { 
    apiKey: "data", 
    authDomain: "data", 
    databaseURL: "data", 
    storageBucket: "data", 
    messagingSenderId: "data" 
}; 
firebase.initializeApp(config); 
var provider = new firebase.auth.FacebookAuthProvider(); 


ReactDOM.render(
    <App/>, 
    document.getElementById('root') 
); 

Answer 1

あなたはclassにあなたの方法を配置する必要があり、その後、あなたがclassコンポーネントをレンダリングする必要があります。ここでは、コードです。以下の例を参照してください：

class App extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     user: null 
    } 
    } 

    loginWithFacebook() { 
    ... 
    } 

    logOut() { 
    ... 
    } 

    render() { 
    const user = this.state.user; 

    return (
     ... 
    ) 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById("app") 
);