QA@IT

Firebaseでのdatabaseからの値の読み込みについて

7822 PV

Firebaseを初めて使っているのですが、databaseからの値の読み取り方がよくわからず、苦戦しています。

開発環境: React.js + Firebase

データベース内のJsonは以下のような構成です。
ここからtweets以下のtextの値を、{text:test},{text:test},{text:test}...といったような形で配列に格納したいと考えています。

{
  "tweets" : {
    "-KzqcjiqOObM4xWgnV6m" : {
      "text" : "test"
    },
    "-Kzqd01BsRVOSs1sSdVj" : {
      "text" : "test"
    },
    "-KzqdMxli8vFLLwrR9yo" : {
      "text" : "test"
    },
    "-KzqddqAIIHHHK0kjThI" : {
      "text" : "test"
    }
  }
}

プログラムでは

var firebaseRef = firebase.database().ref();
var tweetsRef = firebaseRef.child("tweets");

//略

constructor(props) {
            super(props);
                this.state = {tweets: []
            };
                console.log("initialized");
        }

            componentDidMount(){
                tweetsRef.on("value", function(snapshot){
                    this.setState({
                        tweets: snapshot.val()
                    });
                });
            }
//略

といったように記述しているのですが、this.statのtweetsに値が入ってくれません。
snapshotとstateの型が違うからなのかと考え色々試してみましたが、どうしても読み込むことができず、詰まってしまっています。

firebaseについて詳しい型がいらっしゃいましたら、おかしな点についてご指摘いただければと思います。
よろしくお願い致します。

--追記--
現在、コンソールで確認したところ、snapshot()で取得したデータは下のような形になってしまっています。

{-KzqcjiqOObM4xWgnV6m: {…}, -Kzqd01BsRVOSs1sSdVj: {…}, -KzqdMxli8vFLLwrR9yo: {…}, -KzqddqAIIHHHK0kjThI: {…}}
ウォッチ

この質問への回答やコメントをメールでお知らせします。