javascript - 使用 endAt 加载更多数据

Question

我最初使用 limitToLast(5) 从我的数据库节点加载最后 5 个项目，如下所示:

var myData = [];
var firstKey;

var fetchInitialData(category){
    firebase.database().ref(category).orderByKey().limitToLast(5).once('value' , function(snap){
        addDatToArray(snap);
    });
}

fetchInitialData('myCategory');

var addDatToArray = function(snap){
    snap.forEach(function(child){
        myData.push(child.val());
        if(!firstKey){
            firstKey = child.key;
        }
    });
}

我有一个加载更多按钮，它可以再获取 5 个项目并将其推送到 myData[]。由于我将 firstKey 存储在初始提取中，因此我将其传递给 endAt()，如下所示:

var fetchMoreData(category){
    firebase.database().ref(category).orderByKey().endAt(firstKey).limitToLast(5).once('value' , function(snap){
        firstKey = null;
        addDatToArray(snap);
    });
}

它工作正常，但问题是因为我正在使用 endAt() 获取更多数据并限制数据，并且 endAt() 也包括结尾品脱的项目。因此，对于每次加载更多数据，myData 数组中都会复制一项。

为了便于描述，请考虑以下示例:

我的数据结构

----category
    --item1
    --item2
    --item3
    --item4
    --item5
    --item6
    --item7
    --item8
    --item9
    --item10

1. 在初始获取时，我获取最后 5 个项目，即项目 6-10，并且 firstKey 设置为 item6。 显示给用户的项目是

item6
item7
item8
item9
item10

2. 在加载更多时获取 firstKey，即 item6 被传递给 endAt() 并且由于 endAt() 是包容性的，它还获取 item6 并将其推送到 myData[]

显示给用户的项目是

item6
item7
item8
item9
item10

item5
item4
item3
item2
item6//fetched again

如何克服这个问题

Answer 1

在向数组添加数据时，如果子项与 endAt 查询的键匹配，您可以忽略它吗？所以您的 addDatToArray 方法将需要一个参数，例如:

var addDatToArray = function(snap, ignoreKey){
    snap.forEach(function(child){
        if(child.key != ignoreKey) {
            myData.push(child.val());
        }
        if(!firstKey){
            firstKey = child.key;
        }
    });
}

来自 firebase.database.Query#endAt 的文档:

The ending point is inclusive, so children with exactly the specified value will be included in the query.

因此，您需要通过将 limitToLast 调整 +1 然后丢弃重复结果来解决这个问题。