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

我希望能够以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
    });
});

ReactJS＆amp; Firebase - 订购数据

1 个答案: