ReactJS＆Firebase - 注文データ

Question

私は次のコードでFirebaseを照会アプリに反応している：

const usersRef = firebase.database().ref('users').orderByChild('totalSubs'); 

    usersRef.on('value', (snapshot) => { 
     let users = snapshot.val(); 

     let newState = []; 

     for (let user in users) { 
     newState.push({ 
      id: user, 
      displayName: users[user].displayName, 
      totalSubs: users[user].totalSubs, 
      userImg: users[user].userImg 
     }); 

     } 
     this.setState({ 
     users: newState 
     }); 
    }); 

「ユーザー」のための私のFirebase構造はここで見ることができます。

私は私の名前は各ユーザーに対して表示される理由である私がテストしています3つの別のGoogleアカウントを持っています。

反応アプリ内に各ユーザーを表示できるように、totalSubsの降順で表示できます。上部にはtotalSubsのユーザーが表示されます。

他の投稿から、私は.orderByChild('totalSubs');がデータを注文してこれを許可すると思ったが、うまくいかないと思った。私が何が欠けているか教えてもらえますか？

Answer 1

あなたの質問は正しいですが、返されたDataSnapshotからデータを抽出するために使用している方法を調整する必要があります。 working with lists of data documentationから

：

あなたは、ループの上には、個々の子どもにアクセスすることができ、単一のスナップショットとしてデータの全体のリストを返しますデータのリストにvalueオブザーバを取り付けます。

クエリに対して1つの一致が存在する場合でも、スナップショットは引き続きリストです。 1つの項目だけが含まれています。アイテムにアクセスするには、結果をループする必要があります。

ref.once('value', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
    var childKey = childSnapshot.key; 
    var childData = childSnapshot.val(); 
    // ... 
    }); 
}); 

したがって、あなたのコード例では、変更のカップルを作り、forEachを使用して返された子どもたちを反復処理する必要があります

const usersRef = firebase.database().ref('users').orderByChild('totalSubs'); 

usersRef.on('value', (snapshot) => { 
    let newState = []; 

    snapshot.forEach(function(childSnapshot) { 
     newState.push({ 
      id: childSnapshot.key, 
      displayName: childSnapshot.val().displayName, 
      totalSubs: childSnapshot.val().totalSubs, 
      userImg: childSnapshot.val().userImg 
     }); 
    }); 

    this.setState({ 
     users: newState 
    }); 
});