Next.js/Firebase -如何创建无限滚动？
我有点迷茫，不知道如何在next.js中创建无限滚动元素和防火墙。
我正在尝试使用“我的api”，并在我的api文件上使用防火墙。
我对api的调用目前是这样的。我有一个名为data的列表，我向我的api发送一个请求，并获得前9个(限制param)文档。
useEffect(() => {
console.log("useEffect");
const getImage = async () => {
const req = await fetch(`api/firebase?limit=9`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
const data = await req.json();
return data;
};
getImage().then((data) => {
setData(data);
});
}, []);我的请求处理是这样的：
if (req.method === "GET") {
const qu = req.query;
const max = qu.limit;
const q = query(collection(db, "images"), limit(max));
const querySnapshot = await getDocs(q);
const data = querySnapshot.docs.map((doc) => {
return {
label: doc.data().label,
url: doc.data().url,
id: doc.id,
};
});
res.status(200).json(data);
}我已经尝试/抬头响应-无限滚动组件，我认为我可以让它工作，但我不知道如何用我的api从火基获得接下来的9个文档。
在火药库中有startAfter()，它接受documentSnapshot而不是id，但是我可以通过保存上一次文档发送中的id，然后用这个id调用getDoc来调用它，然后再开始，但是我不知道如何用api调用来实现这个想法。假设我的防火墙上有27个文档，我用useEffect调用前9个文档，我需要另一个函数来调用和更新我的数据吗？我可以尝试发送最后一个id作为param和更新，但这变得很复杂，我不知道是否有一个简单的方法。
回答 2
Stack Overflow用户
发布于 2022-07-24 14:22:40
如果其他人遇到这样的问题，我就是这样解决的
我将这个if语句添加到我的api处理程序中，它检查我是否通过调用发送了docID param，并获得了带有该id的文档，然后我将该文档发送给了startAfter。
if (qu.docID) {
const id = qu.docID;
const max = qu.limit;
const idquery = query(
collection(db, "images"),
where("__name__", "==", id)
);
const documentSnapshots = await getDocs(idquery);
const lastVisible =
documentSnapshots.docs[documentSnapshots.docs.length - 1];
const next = query(
collection(db, "images"),
orderBy("createdAt", "desc"),
startAfter(lastVisible),
limit(max)
);
const querySnapshot = await getDocs(next);
const data = querySnapshot.docs.map((doc) => {
return {
label: doc.data().label,
url: doc.data().url,
id: doc.id,
};
});
res.status(200).json(data);
}就像若泽·德德说的那样，我创建了另一个函数来加载更多的
const getNext = async (docID) => {
console.log("getNext");
const req = await fetch(`api/firebase?limit=9&docID=${docID}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
const data = await req.json();
return data;
};拉斯利，我使用反应-无限-滚动-组件的next={}调用我的第二个函数，经过几次调整，它起作用了。
Stack Overflow用户
发布于 2022-07-22 21:25:39
回顾无限滚动是如何工作的，通常有两个单独的查询：
- 第一批(没有startAfter)的查询
- 加载更多内容的查询(完全相同的查询，但使用startAfter())
实际上，您可以通过Firebase查看无限滚动的这快速指南。
现在，在您使用API的情况下，在没有任何设置顺序的情况下，文档ID充当排序顺序。在这种情况下，只需使用where子句检索ID大于或低于指定ID的所有文档。
例如：where(FieldPath.documentId(), ">", id)。
https://stackoverflow.com/questions/73070370
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号