javascript - 从 Firebase 云数据库获取数据并使用加载更多按钮(分页)Javascript 显示它们

Question

我尝试过这种方法，但得到 Uncaught FirebaseError: Function Query.startAfter() requires a valid first argument, but it was undefined. lastVisible正在控制台上获取值。这是代码:

function loadMoreButtonAction() {
  fetchRequest(true);
}

function fetchRequest(isFromLoadMore) {
    var table = document.getElementById("outputTableID");

  var lastVisible;
  var tableIndex;
  if (isFromLoadMore == false) {
    if (table.rows.length > 2) {
        resetTable(table);
    }

    var first = firestore.collection(parentNode).orderBy("serialNo").limit(5);
    first.get().then((querySnapshot) => {
      // Get the last visible document
      lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
      console.log("lastVisible", lastVisible);
      tableIndex = querySnapshot.size;
      document.getElementById("wallpaperCount").innerHTML = 'Total Items: ' + tableIndex + '';
      querySnapshot.forEach((doc) => {
        var productItem = Object.create(wallpapers);
        productItem.nodeId = doc.id;
        productItem.serialNo = doc.data().serialNo;
        productItem.title = doc.data().title;
        productItem.downloadNumber = doc.data().downloadNumber;
        productItem.isPremimumItem = doc.data().isPremimumItem;
        productItem.wallpaper1125_2436ImgName = doc.data().wallpaper1125_2436ImgName;
        productItem.wallpaper1242_2208ImgName = doc.data().wallpaper1242_2208ImgName;
        productItem.wallpaper1242_2688ImgName = doc.data().wallpaper1242_2688ImgName;
        productItem.wallpaper828_1792ImgName = doc.data().wallpaper828_1792ImgName;
        productItem.wallpaper750_1334ImgName = doc.data().wallpaper750_1334ImgName;
        productItem.wallpaper640_1136ImgName = doc.data().wallpaper640_1136ImgName;
        productItem.wallpaper1125_2436Url = doc.data().wallpaper1125_2436Url;
        productItem.wallpaper1242_2208Url = doc.data().wallpaper1242_2208Url;
        productItem.wallpaper1242_2688Url = doc.data().wallpaper1242_2688Url;
        productItem.wallpaper828_1792Url = doc.data().wallpaper828_1792Url;
        productItem.wallpaper750_1334Url = doc.data().wallpaper750_1334Url;
        productItem.wallpaper640_1136Url = doc.data().wallpaper640_1136Url;
        productItem.wallpaper1125_2436ImgStorageRef = doc.data().wallpaper1125_2436ImgStorageRef;
        productItem.wallpaper1242_2208ImgStorageRef = doc.data().wallpaper1242_2208ImgStorageRef;
        productItem.wallpaper1242_2688ImgStorageRef = doc.data().wallpaper1242_2688ImgStorageRef;
        productItem.wallpaper828_1792ImgStorageRef = doc.data().wallpaper828_1792ImgStorageRef;
        productItem.wallpaper750_1334ImgStorageRef = doc.data().wallpaper750_1334ImgStorageRef;
        productItem.wallpaper640_1136ImgStorageRef = doc.data().wallpaper640_1136ImgStorageRef;
        productItem.wallpaper1125_2436FacebookPhotoID = doc.data().wallpaper1125_2436FacebookPhotoID;
        productItem.wallpaper1242_2208FacebookPhotoID = doc.data().wallpaper1242_2208FacebookPhotoID;
        productItem.wallpaper1242_2688FacebookPhotoID = doc.data().wallpaper1242_2688FacebookPhotoID;
        productItem.wallpaper828_1792FacebookPhotoID = doc.data().wallpaper828_1792FacebookPhotoID;
        productItem.wallpaper750_1334FacebookPhotoID = doc.data().wallpaper750_1334FacebookPhotoID;
        productItem.wallpaper640_1136FacebookPhotoID = doc.data().wallpaper640_1136FacebookPhotoID;

        var row = table.insertRow(2);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        var cell9 = row.insertCell(8);
        var cell10 = row.insertCell(9);
        var cell11 = row.insertCell(10);
        cell1.innerHTML = productItem.serialNo;
        cell2.innerHTML = productItem.title;
        cell3.innerHTML = productItem.downloadNumber;
        cell4.innerHTML = productItem.isPremimumItem;
        appendImageOnCell(cell5, "./utilities/images/tick.png"); //productItem.wallpaper1125_2436Url
        appendImageOnCell(cell6, "./utilities/images/tick.png"); //productItem.wallpaper1242_2208Url
        appendImageOnCell(cell7, "./utilities/images/tick.png"); //productItem.wallpaper1242_2688Url
        appendImageOnCell(cell8, "./utilities/images/tick.png"); //productItem.wallpaper828_1792Url
        appendImageOnCell(cell9, "./utilities/images/tick.png"); //productItem.wallpaper750_1334Url
        appendImageOnCell(cell10, productItem.wallpaper640_1136Url);
        appendButtonOnCell(cell11, productItem);
      });
    });
  } else {
    var second = firestore.collection(parentNode).orderBy("serialNo").startAfter(lastVisible).limit(5);
    second.get().then((querySnapshot) => {
      // Get the last visible document
      lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
      console.log("lastVisible", lastVisible);
      tableIndex = tableIndex + querySnapshot.size;
      document.getElementById("wallpaperCount").innerHTML = 'Total Items: ' + tableIndex + '';
      querySnapshot.forEach((doc) => {
        var productItem = Object.create(wallpapers);
        productItem.nodeId = doc.id;
        productItem.serialNo = doc.data().serialNo;
        productItem.title = doc.data().title;
        productItem.downloadNumber = doc.data().downloadNumber;
        productItem.isPremimumItem = doc.data().isPremimumItem;
        productItem.wallpaper1125_2436ImgName = doc.data().wallpaper1125_2436ImgName;
        productItem.wallpaper1242_2208ImgName = doc.data().wallpaper1242_2208ImgName;
        productItem.wallpaper1242_2688ImgName = doc.data().wallpaper1242_2688ImgName;
        productItem.wallpaper828_1792ImgName = doc.data().wallpaper828_1792ImgName;
        productItem.wallpaper750_1334ImgName = doc.data().wallpaper750_1334ImgName;
        productItem.wallpaper640_1136ImgName = doc.data().wallpaper640_1136ImgName;
        productItem.wallpaper1125_2436Url = doc.data().wallpaper1125_2436Url;
        productItem.wallpaper1242_2208Url = doc.data().wallpaper1242_2208Url;
        productItem.wallpaper1242_2688Url = doc.data().wallpaper1242_2688Url;
        productItem.wallpaper828_1792Url = doc.data().wallpaper828_1792Url;
        productItem.wallpaper750_1334Url = doc.data().wallpaper750_1334Url;
        productItem.wallpaper640_1136Url = doc.data().wallpaper640_1136Url;
        productItem.wallpaper1125_2436ImgStorageRef = doc.data().wallpaper1125_2436ImgStorageRef;
        productItem.wallpaper1242_2208ImgStorageRef = doc.data().wallpaper1242_2208ImgStorageRef;
        productItem.wallpaper1242_2688ImgStorageRef = doc.data().wallpaper1242_2688ImgStorageRef;
        productItem.wallpaper828_1792ImgStorageRef = doc.data().wallpaper828_1792ImgStorageRef;
        productItem.wallpaper750_1334ImgStorageRef = doc.data().wallpaper750_1334ImgStorageRef;
        productItem.wallpaper640_1136ImgStorageRef = doc.data().wallpaper640_1136ImgStorageRef;
        productItem.wallpaper1125_2436FacebookPhotoID = doc.data().wallpaper1125_2436FacebookPhotoID;
        productItem.wallpaper1242_2208FacebookPhotoID = doc.data().wallpaper1242_2208FacebookPhotoID;
        productItem.wallpaper1242_2688FacebookPhotoID = doc.data().wallpaper1242_2688FacebookPhotoID;
        productItem.wallpaper828_1792FacebookPhotoID = doc.data().wallpaper828_1792FacebookPhotoID;
        productItem.wallpaper750_1334FacebookPhotoID = doc.data().wallpaper750_1334FacebookPhotoID;
        productItem.wallpaper640_1136FacebookPhotoID = doc.data().wallpaper640_1136FacebookPhotoID;

        var row = table.insertRow(tableIndex);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        var cell9 = row.insertCell(8);
        var cell10 = row.insertCell(9);
        var cell11 = row.insertCell(10);
        cell1.innerHTML = productItem.serialNo;
        cell2.innerHTML = productItem.title;
        cell3.innerHTML = productItem.downloadNumber;
        cell4.innerHTML = productItem.isPremimumItem;
        appendImageOnCell(cell5, "./utilities/images/tick.png"); //productItem.wallpaper1125_2436Url
        appendImageOnCell(cell6, "./utilities/images/tick.png"); //productItem.wallpaper1242_2208Url
        appendImageOnCell(cell7, "./utilities/images/tick.png"); //productItem.wallpaper1242_2688Url
        appendImageOnCell(cell8, "./utilities/images/tick.png"); //productItem.wallpaper828_1792Url
        appendImageOnCell(cell9, "./utilities/images/tick.png"); //productItem.wallpaper750_1334Url
        appendImageOnCell(cell10, productItem.wallpaper640_1136Url);
        appendButtonOnCell(cell11, productItem);
      });
    });
  }
}

我在这里缺少什么？
谢谢!
我的用户界面:

这是我得到的错误:

Answer 1

它看起来像 lastVisible是 undefined ，这是不允许的。查看您的代码时，这是有道理的，因为您定义了 lastVisible内fetchRequest功能。所以每次你打电话fetchRequest ，你最终会得到一个新的 lastVisible初始值为 undefined 的变量.
你要声明 lastVisible外fetchRequest方法，以便在调用 fetchRequest 之间保留其值.
您似乎也在复制 很多 fetchRequest 中的代码.如果我们简化这段代码并拉出lastVisible变量，我们最终会得到类似的结果:

var lastVisible; // declare outside of fetchRequest so that its value is retained between calls
function fetchRequest(isFromLoadMore) {
  var query = firestore.collection(parentNode).orderBy("serialNo").limit(5);
  if (isFromLoadMore == false) {
    if (table.rows.length > 2) {
        resetTable(table);
    }
  }
  else if (lastVisible) {
    query = query.startAfter(lastVisible);
  }
  query.get().then((querySnapshot) => {
    // Get the last visible document
    lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
    console.log("lastVisible", lastVisible);

    ...
  });
}