从 Firebase 云数据库中获取数据并使用加载更多按钮（分页）Javascript 显示它们答案

【问题标题】：Fetching data from Firebase cloud database and showing them with load more button (Pagination) Javascript从 Firebase 云数据库中获取数据并使用加载更多按钮（分页）Javascript 显示它们
【发布时间】：2020-08-10 01:17:45
【问题描述】：

我已经尝试过这种方法，但得到了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);
      });
    });
  }
}

我在这里错过了什么？
谢谢！

我的用户界面：

这是我得到的错误：

【问题讨论】：

请参阅 Paginate data with query cursors 上的 Firebase 文档。
您好，先生，我在文档的帮助下进行了尝试，但我认为我的 lastVisible = querySnapshot.docs[querySnapshot.docs.length-1]; 没有正确获得价值。我在这里想念什么？我已经更新了我的问题。谢谢！
查询本身看起来不错。有没有办法可以在代码中显示问题以便我们看到它？由于我们看不到您的 UI，因此通常最好是您可以 console.log 有问题的值（如 serialNo），然后在问题中包含更新的代码及其输出。
我已经更新了我的代码先生。

标签： javascript firebase google-cloud-firestore pagination

【解决方案1】：

看起来lastVisible 是undefined，这是不允许的。查看您的代码时，这是有道理的，因为您在 fetchRequest 函数中定义了 lastVisible。所以每次调用fetchRequest，最终都会得到一个新的lastVisible变量，初始值为undefined。

您需要在fetchRequest 方法之外声明lastVisible，以便在对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);

    ...
  });
}

【讨论】：

非常感谢先生。
先生，我如何使用这个limit() 查询获取最新/最后一个条目？在实时数据库中它有limit_to_last，但在云数据库中，我该如何获取它？使用上述方法，它始终显示前 5 个条目（根据序列号）。如果我按加载更多，那么它将在现有条目列表的顶部添加更多 5 个条目。但我想要的是首先它会显示最后 5 个条目，然后通过按加载更多，下一个最后 5 个条目将添加到现有 5 个条目的底部。它会这样。可能吗？谢谢！
要获取最后的项目，请颠倒排序顺序，然后像现在一样使用limit。
感谢您的回复。我在迭代值之前添加了“Desc”：firestore.collection(parentNode).orderBy("serialNo", "desc").limit(20);，并像这样反转我的快照数组querySnapshot.reverse(); ，querySnapshot.forEach((doc) =>，但我的表上没有出现任何内容。
我建议为该问题创建一个新问题。请在那里尝试仅使用硬编码输入和仅console.log 输出来重现问题 - 因为我们很难看到您的表格。

【解决方案2】：

首先，您可以这样做：

let productItemLiteral = { nodeId: doc.id, ...doc.data() };
let productItem = Object.create(wallpapers, productItemLiteral);

关于分页，您可以使用查询游标对获取的数据进行分页。 firestore 文档很好地处理了这方面的问题：https://firebase.google.com/docs/firestore/query-data/query-cursors

基本上，您的 fetch 函数可能如下所示：

const fetchRecords = cursor => {
  const queryObj = cursor ?
    firestore().collection(parentNode).orderBy("serialNo").startAfter(cursor).limit(1 
 0)
    :
    firestore().collection(parentNode).orderBy("serialNo").limit(10);
  queryObj.get().then((querySnapshot => {
    // Save the last document to a global variable so you can use it as reference to fetch the next page
    lastDocCursor = querySnapshot.docs[querySnapshot.docs.length - 1];
    // Include the rest of your handler
  }
}

You should have a global variable: `lastDocCursor` initialized as `null`, so you could just call `fetchRecords(lastDocCursor);`. If a cursor already exists, it will fetch the next 10 documents that follow that document, if not, it will fetch the first 10

【讨论】：