使用Firebase数据库进行分页/延迟加载 [英] Pagination/Lazyloading with Firebase Database

问题描述

我想最初从Firebase数据库中加载20个项目，并且一旦用户向下滚动，就应该再加载20个项目.我以为可以使用 startAt / endAt 方法，但这种方法无法正常工作.有人可以指出我正确的方向吗?

I want to load 20 items from firebase database initially and as soon as a user scrolls down, 20 more items should be loaded. I thought I could use startAt/endAt methods for that but that doesn't work that way. can somebody point me in the right direction?

constructor() {
    this.state = {
      startAt: 0,
      endAt: 20,
    };
  }

retrieveData(startAt, endAt) {

const ref = firebase.database().ref().child('clubs').startAt(startAt).endAt(endAt);
ref.on('value', gotData, errorData);

function gotData(data) {
  
// do some stuff with received data

  that.setState({
    startAt: endAt + 1,
    endAt: endAt + endAt
  });
}

function errorData(error) {
  console.log(error);
}

推荐答案

您似乎已经使用了数据库，其中查询结果可以基于偏移量:您传入的是要跳过多少个项目的数值.

You seem to have worked with databases where query results can be based on an offset: a numerical value you pass in of how many items to skip.

Firebase查询不适用于此类偏移，而是基于游标或锚项的概念.要获得结果页面，您必须知道从哪个项目(锚点)开始，以及返回多少个项目.

Firebase queries don't work with such offsets, but instead are based on the concept of a cursor - or an anchor item. To get a page of results, you must know at what item (the anchor) to start, and how many items to return.

在您的代码中，这意味着您无需跟踪要开始的节点，而不必计算要跳过的项目数.具体来说，您需要知道键以及排序的任何属性.由于您没有对任何东西进行排序，因此只需要键即可.

In your code that means that instead of a count of the number of items to skip, you need to keep track of the node where to start. Specifically you need to know the key and whatever property you sorted on. Since you're not sorting on anything, you just need the key.

要获得商品的首页，请执行以下操作:

To get the first page of items, do something like this:

let query = firebase.database().ref().child('clubs').orderByKey().limitToFirst(20);
var lastSeenKey;
ref.on('value', gotData, errorData);

function gotData(data) {
  data.forEach((snapshot) => {
    lastSeenKey = snapshot.key;
  })
  ...
}

因此，上面的更改是:

1. 我们显式地按键对查询进行排序，以确保服务器知道如何对数据进行排序-这对于能够一致地分页是至关重要的.
2. 然后我们通过调用limitToFirst(20)将项目限制为20个.
3. 最后，我们跟踪结果中的最后一个关键字(我们的锚点)，以便我们可以将其用作将来查询的起点.

1. We explicitly order the query by key, which ensures the server knows how to order the data - and is key to being able to consistently paginate.
2. We then limit to 20 items by calling limitToFirst(20).
3. Finally, we keep track of the last key in the results (our anchor), so that we can use that as the starting point future queries.

然后，当您准备好获取下一页时，您将执行以下操作:

Then when you're ready for getting the next page, you'd do:

let query = firebase.database().ref().child('clubs').orderByKey().startAt(lastSeenKey).limitToFirst(21);

所以我们现在:

• 从我们之前看到的最后一个键(锚点)开始.
• 检索21个而不是20个项目，因为我们已经在上一页中显示了锚点项目.

此主题之前已经很经常地被介绍过，因此我建议您还查看其他

This topic has been covered quite regularly before, so I recommend also checking out some of the answers to other questions about pagination on Firebase.

这篇关于使用Firebase数据库进行分页/延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！