javascript - 使用实时 Firebase 数据库（Web）在无限滚动中获取空错误

Question

所以我正在尝试为我的实时数据库实现无限滚动。目前，我的代码正在一次从我的数据库中加载我所有的图像（存储为引用）。因此，这确实减慢了网站的速度，并且由于所有数据总是被传输，因此我花费了更多的钱。我尝试使用几行来获取对数据库中键的引用，以跟踪已加载的数据：

//This snippet of code does not work
var referenceToOldestKey = '';
if (!referenceToOldestKey) {
firebase.database().ref('Posts/').orderByKey().endAt(referenceToOldestKey).limitToLast(10).once('value').then((snapshot)=>{
    var arrayOfKeys = Object.keys(snapshot.val()).sort().reverse();
    var results = arrayOfKeys.map((key) => snapshot.val()[key]);
    referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

    //loop thru and append content here to desired div
})
}

但是我似乎无法让这个功能正常工作。我一直在我调用的var arrayOfKeys = Object.keys(snapshot.val()).sort().reverse();地方得到一个空引用，它会说“对象”为空。我当前的代码（一次加载所有图像）可以在这里看到：

/*READ PIC & DATA FROM REALTIME- PICTURES*/

var database = firebase.database().ref().child('Posts/');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var counter=0;

        snapshot.forEach(function(data){
            var url = data.val().url;
            var keyVal = data.val().keyVal;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().medium;
            var additional = data.val().additional;

            content += '<div class="col-xl-4 col-xs-12 imageGrid" id="'+keyVal+'">';
            content += '<a class="lazy example-image-link" href="'+url+'" data-title="'+title+'&lt;br /&gt;'+medium+'&lt;br /&gt;'+dimensions+'&lt;br /&gt;'+year+'&lt;br /&gt;'+additional+'&lt;br /&gt;'+'" data-lightbox="example-1 '+counter+'"><img class="lazy example-image" width="300" height="200" src="'+url+'" alt="'+title+'"/></a>';
            content += '</br><button class="btn btn-danger deleteButton logged-inX" onclick="deleteFile(this)">x</button>';
            content += '<button class="btn btn-light editButton logged-inX" data-toggle="modal" data-target="#myModalUpdate" onclick="getUpdateId(this)">&#9998;</button>';
            content += '</div>';
            counter++;

        });
        $('.displayImagesFromFirebase').append(content);
            setupUI(firebase.auth().currentUser);
    }

});

如果有人对如何合并这两个有任何想法，以便我最初加载 10 张图像，然后当我的用户滚动到页面底部时，我将加载接下来的 10 张图像，我将不胜感激。

更新：与 Klaycon 交谈后，我能够摆脱 null 错误。但是，现在什么都没有显示，控制台中也没有错误。你会注意到我.child('Posts')在我的数据库参考行中添加了，这是我试图参考的数据库。我还测试了将 ('Posts') 放入 ref() 内，但无济于事。新代码如下：

var referenceToOldestKey = '';
if (!referenceToOldestKey) {
firebase.database().ref().child('Posts/').orderByKey().endAt(referenceToOldestKey).limitToLast(10).once('value').then((snapshot)=>{
    if(snapshot.exists()){
    var arrayOfKeys = Object.keys(snapshot.val()).sort().reverse();
    var results = arrayOfKeys.map((key) => snapshot.val()[key]);
    referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

    var content = '';
    var counter=0;

    snapshot.forEach(function(data){
        var url = data.val().url;
        var keyVal = data.val().keyVal;
        var dimensions = data.val().dimensions;
        var title = data.val().title;
        var year = data.val().year;
        var medium = data.val().medium;
        var additional = data.val().additional;

        content += '<div class="col-xl-4 col-lg-6 col-md-6 col-xs-12 imageGrid" id="'+keyVal+'">';
        content += '<a class="lazy example-image-link" href="'+url+'" data-title="'+title+'&lt;br /&gt;'+medium+'&lt;br /&gt;'+dimensions+'&lt;br /&gt;'+year+'&lt;br /&gt;'+additional+'&lt;br /&gt;'+'" data-lightbox="example-1 '+counter+'"><img class="lazy example-image" width="300" height="200" src="'+url+'" alt="'+title+'"/></a>';
        content += '</br><button class="btn btn-danger deleteButton logged-inX" onclick="deleteFile(this)">x</button>';
        content += '<button class="btn btn-light editButton logged-inX" data-toggle="modal" data-target="#myModalUpdate" onclick="getUpdateId(this)">&#9998;</button>';
        content += '</div>';
        counter++;

    });
    $('.displayImagesFromFirebase').append(content);
        setupUI(firebase.auth().currentUser);

    }
    //loop thru and append content here to desired div
})
}
else{
    firebase.database().ref().child('Posts/').orderByKey().endAt(referenceToOldestKey).limitToLast(10).once('value').then((snapshot)=>{
        if(snapshot.exists()){
        var arrayOfKeys = Object.keys(snapshot.val()).sort().reverse().slice(1);
        var results = arrayOfKeys.map((key) => snapshot.val()[key]);
        referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

        var content = '';
        var counter=0;

        snapshot.forEach(function(data){
            var url = data.val().url;
            var keyVal = data.val().keyVal;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().medium;
            var additional = data.val().additional;

            content += '<div class="col-xl-4 col-lg-6 col-md-6 col-xs-12 imageGrid" id="'+keyVal+'">';
            content += '<a class="lazy example-image-link" href="'+url+'" data-title="'+title+'&lt;br /&gt;'+medium+'&lt;br /&gt;'+dimensions+'&lt;br /&gt;'+year+'&lt;br /&gt;'+additional+'&lt;br /&gt;'+'" data-lightbox="example-1 '+counter+'"><img class="lazy example-image" width="300" height="200" src="'+url+'" alt="'+title+'"/></a>';
            content += '</br><button class="btn btn-danger deleteButton logged-inX" onclick="deleteFile(this)">x</button>';
            content += '<button class="btn btn-light editButton logged-inX" data-toggle="modal" data-target="#myModalUpdate" onclick="getUpdateId(this)">&#9998;</button>';
            content += '</div>';
            counter++;

        });
        $('.displayImagesFromFirebase').append(content);
            setupUI(firebase.auth().currentUser);

        }

    })
}

标签： javascriptfirebasefirebase-realtime-databaselazy-loadinginfinite-scroll