[英]React and FireStore - How to find out the total number of documents in a collection
In the following code, I use the totalDoclNumbers and a docLimit to create a kind of pagination.在下面的代码中,我使用totalDoclNumbers和docLimit来创建一种分页。 If I assign totalDoclNumbers a static number, everything works.如果我为totalDoclNumbers分配一个 static 编号,一切正常。
But I want that totalDoclNumbers is actually the number of all documents in the collection and it should be calculated programatically.但我希望totalDoclNumbers实际上是集合中所有文档的数量,它应该以编程方式计算。 For this I tried the following:为此,我尝试了以下方法:
import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
import DeleteCard from './DeleteCard';
const List = () => {
const [cards, setCards] = useState([]);
const [beginAfter, setBeginAfter] = useState(0);
const [totalDoclNumbers, setTotalDoclNumbers] = useState(0);
useEffect(() => {
const fetchData = async () => {
const data = await db
.collection('FlashCards')
.orderBy('customId')
.limit(docLimit)
.startAfter(beginAfter)
.get();
setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
setTotalDoclNumbers(docs.length - 1); // Causes ERROR
// setTotalDoclNumbers(100); // This works
};
fetchData();
}, [beginAfter]);
const docLimit = 10;
// Creating a menu for our documents (10 documents per each menu)
const RenderDocumentMenu = () =>
Array(totalDoclNumbers / docLimit)
.fill()
.map((_, i) => {
const onClick = () => setBeginAfter(docLimit * i);
return (
<div key={i} className='document__set' onClick={onClick}>
{docLimit * i + 1} to {docLimit * i + docLimit} Data
</div>
);
});
return (
<>
<div className='document'>
<RenderDocumentMenu />
</div>
<ul className='list'>
{cards.map((card) => (
<li key={card.id} className='list__item'>
<DeleteCard card={card} />
</li>
))}
</ul>
<AddCard />
</>
);
};
export default List;
But then I get this error: 'docs' is not defined no-undef但后来我得到这个错误:'docs' is not defined no-undef
The line which causes the problem is this one: setTotalDoclNumbers(docs.length - 1);导致问题的行是这一行: setTotalDoclNumbers(docs.length - 1);
What is wrong with my approach?我的方法有什么问题?
It is pretty clear that in your useEffect you need to access the docs
using data.docs
.很明显,在您的 useEffect 中,您需要使用data.docs
访问docs
。
Like this像这样
...
setTotalDoclNumbers(data.docs.length - 1);
...
Just a heads up - The data.docs
can be an empty array, so in that case, you are doing something like setTotalDoclNumbers(-1)
.请注意 - data.docs
可以是一个空数组,因此在这种情况下,您正在执行类似setTotalDoclNumbers(-1)
的操作。 So just watch out.所以请注意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.