javascript - 如何从带有钩子和上下文 API 的 firebase 集合中获取有限数量的文档但所有文档计数?
问题描述
出色地。假设我在 firebase 集合中有 100 个文档。我想获取其中的 10 个,但我还需要同时获取总数以实现创建分页的目标。
const updateDocuments = useCallback((documents, size) => {
dispatch({
type: actions.UPDATE_DOCUMENTS,
payload: {documents, size}
});
}, []);
useEffect(() => {
const ref = db.collection('documents').orderBy('createdAt', 'desc');
const unsubscribe = ref.onSnapshot(async snapshot => {
const documents = await fetchDocuments(snapshot)
const length = await fetchDocumentsCount(snapshot)
updateDocuments(documents, length);
});
return () => {
unsubscribe();
}
}, [updateDocuments]);
好的,现在可以肯定的是,上面的快照将获取 100 个文档,并且总计数为 100。专家们已经可以猜到我使用了 context api,我会将 100 个文档和总数推送到下面的这个对象,我想在我喜欢的任何组件中使用它。
const state = {
documents: [],
size: 0
}
所以如果我创建 ref 为
const ref = db.collection('documents').orderBy('createdAt', 'desc').limit(10);
然后我会得到 10 个文件,但文件总数也变成 10 个。
那么如何在同一个 useEffect 中获得 10 个文档但文档总数(在本例中为 100 个)?
笔记:
export const fetchDocuments = data => {
const documents= data.docs.map(doc => {
const { name, email} = doc.data();
return {
name,
email,
}
})
return documents;
}
export const fetchDocumentsCount = data => data.size;
解决方案
推荐阅读
- javascript - 有没有办法根据盒子里剩下的空间来显示按钮
- java - 仅在线程 1 完成后执行线程 2
- java - 如何在 Android 上使用 libgdx 实现 RewardedVideo 广告?
- c++ - 如何用 char 获得多个输入,用 int 获得多个输出?C++
- e-commerce - 打开电子商务跟踪的问题
- file - 以固定大小的块读取二进制文件并将所有这些块存储到 Vec 中的正确方法是什么?
- python - 如何替换 JSON 列表以打印到 CSV?
- reactjs - ReactiveSearch:是否可以在 SingleDataList 组件上组合标签值?
- c++ - 在 c++ 中使用用户输入初始化数组大小的不同方法有哪些
- postgresql - 如何在 PostgreSQL 11.1 中将现有列更改为身份