Firebase 3のデータをES6構文のReactコンポーネントに読み込む

Question

FirebaseデータベースからのReact Webアプリケーションで数字を読んだり、サインアップしたユーザー数を読み込んだり、ページが読み込まれます。

ReactとFirebaseの古いバージョンのドキュメントがありますが、このユースケースは新しい方法で実行できるはずです。クロームデバッガで

Screenshot of my Firebase Database.

import React from 'react' 
 
import {Badge} from 'react-bootstrap' 
 
var firebase = require('firebase') 
 
var config = { 
 
    apiKey: "MyKey", // redacted key 
 
    authDomain: "dnavid-c48b6.firebaseapp.com", 
 
    databaseURL: "https://dnavid-c48b6.firebaseio.com", 
 
    storageBucket: "dnavid-c48b6.appspot.com", 
 
}; 
 
var firebaseApp = firebase.initializeApp(config); 
 
var UCRef = firebaseApp.database().ref("numberofusers") 
 
class UserCount extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = {usercount: '3'} 
 
    } 
 
    componentDidMount() { 
 
    // this.setState({usercount:4}) // This actually works and displays "4" 
 
    var uc = UCRef.on('value',function(snapshot){return(snapshot.val())}) 
 
    debugger; 
 
    this.setState({usercount:uc}) // This does not work 
 
    } 
 
    render(){ 
 
    return (
 
     <Badge> 
 
     {this.state.usercount} 
 
     </Badge> 
 
    ) 
 
    } 
 
} 
 
export default UserCount;                   

（ "デバッガ" コマンドに注意してください）私は、コンソールで取得：

> uc <. function(snapshot) { return snapshot.val(); }

そして

> uc() Uncaught TypeError: Cannot read property 'val' of undefined(…)

スナップショットが未定義であるため、イベントがトリガーされていないことがわかります。

1. componentDidMountが評価されています（コンポーネントをレンダリングし、デバッガが検査のために停止したときに実行が到達したため）
2. Firebaseドキュメントは、イベントがトリガされると主張し、以下を参照してください。しかし、これはと論理的な音ではありません。 below "このメソッドは、リスナーが接続されているときに1回トリガーされます。"。

バリューイベント 彼らはイベントの時点で存在しますが、指定されたパスに内容 の静的なスナップショットを読み取るために値イベントを使用することができます。このメソッド は、リスナーが接続されたときに1回トリガーされ、子を含むデータが変更されるたびに のデータがトリガーされます。イベントコールバックには、子データを含むその場所のすべてのデータを含む スナップショットが渡されます。 データがない場合、返されるスナップショットはnullです。

リスナーは接続されていませんか？どうしたの？あなたはこのようにそれを行う必要があり

Answer 1

：

componentDidMount() { 
    UCRef.on('value', snapshot => { 
     this.setState({usercount: snapshot.val()}); 
    }); 
    } 

UCRef.on('value', func)はあなたに値を返しません。あなたはコールバックの中でそれを得ることができます