ReactJS 和 Firebase - 排序数据

Question

我有一个使用以下代码查询 Firebase 的 React 应用：

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 帐户，这就是我的名字出现在每个用户面前的原因。

我希望能够在我的 react 应用程序中显示每个用户，以totalSubs 的降序排列，例如totalSubs 最高的用户在顶部。

从其他帖子中，我认为.orderByChild('totalSubs'); 会订购数据并允许这样做，但它不起作用。谁能告诉我我错过了什么？

Answer 1

您的查询是正确的，但您需要调整用于从返回的DataSnapshot 中提取数据的方法。

来自working with lists of data documentation：

将value 观察者附加到数据列表会将整个数据列表作为单个快照返回，然后您可以循环访问单个子级。

即使查询只有一个匹配项，快照仍然是一个列表；它只包含一个项目。要访问该项目，您需要遍历结果：

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
    });
});