首页 > 解决方案 > 如何从带有钩子和上下文 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;

标签: javascriptfirebasegoogle-cloud-firestorereact-hooksreact-context

解决方案


推荐阅读