从Firebase云数据库中获取数据，并使用“加载更多”按钮（分页）将其显示

时间：2020-08-09 13:55:33

标签： javascript firebase google-cloud-firestore pagination

我尝试了这种方法，但是获得了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);
      });
    });
  }
}

我在这里想念什么？
谢谢！

我的用户界面：
enter image description here

这是我得到的错误：
enter image description here

2 个答案:

答案 0 :(得分：1)

首先，您可以执行以下操作，而不是对每个可能的字段重复进行productItem.title = doc.data().title;和调用doc.data()一千次，

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

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

基本上，您的提取函数如下所示：

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

答案 1 :(得分：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);

    ...
  });
}
相关问题
最新问题