Javascript React和FireStore-如何查找集合中的文档总数

在下面的代码中，我使用totalDoclNumbers和docLimit创建一种分页。 如果我给totalDoclNumbers分配一个静态数字，那么一切都正常

但是我想知道，totalDoclNumbers实际上是集合中所有文档的数量，应该通过编程计算。 为此，我尝试了以下方法：

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;

import React，{useState，useffect}来自“React”；
从“../firebase”导入{db}；
从“/DeleteCard”导入DeleteCard；
常量列表=（）=>{
const[cards，setCards]=useState（[]）；
const[beginAfter，setBeginAfter]=useState（0）；
常量[totalDoclNumbers，setTotalDoclNumbers]=useState（0）；
useffect（（）=>{
const fetchData=async（）=>{
常量数据=等待数据库
.收藏（“抽认卡”）
.orderBy（'customId'））
.limit（docLimit）
.开始之后（开始之后）
.get（）；
setCards（data.docs.map（（doc）=>（{…doc.data（），id:doc.id}））；
setTotalDoclNumber（docs.length-1）；//导致错误
//setTotalDoclNumber（100）；//这很有效
};
fetchData（）；
}，[beginAfter]）；
常数docLimit=10；
//为我们的文档创建一个菜单（每个菜单10个文档）
const RenderDocumentMenu=（）=>
数组（总文档数/docLimit）
.fill（）
.map（（u，i）=>{
const onClick=（）=>setBeginAfter（docLimit*i）；
返回(
{docLimit*i+1}到{docLimit*i+docLimit}数据
);
});
返回(

{cards.map（（card）=>(


))}

);
};
导出默认列表；

但是我得到了一个错误：“docs”没有定义no undef

导致问题的行是：setTotalDoclNumber（docs.length-1）

---

我的方法有什么问题？

很明显，在使用效果中，您需要使用

数据访问
文档

像这样

。。。
setTotalDoclNumber（data.docs.length-1）；
...

只需一个提示，
data.docs
可以是一个空数组，因此在这种情况下，您可以执行类似于
setTotalDoclNumber（-1）
的操作。所以请注意。
很明显，在您的使用效果中，您需要使用
data.docs
访问
docs

像这样

。。。
setTotalDoclNumber（data.docs.length-1）；
...

只需一个提示，
data.docs
可以是一个空数组，因此在这种情况下，您可以执行类似于
setTotalDoclNumber（-1）
的操作。所以请注意。
没有名为docs的变量，可能您想键入
data.docs.length
？是的，我需要使用data.docs.length。但是，现在我可以看到我的代码的逻辑有问题。由于我的查询中的.limit（）参数，data.docs.length始终只显示文档数，这是通过.limit（）确定的。我想我需要运行第二个单独的查询来捕获集合中的所有可用文档，并将其分配给TotalDoclNumber。没有名为docs的变量，可能您想键入
data.docs.length
？是的，我需要使用data.docs.length。但是，现在我可以看到我的代码的逻辑有问题。由于我的查询中的.limit（）参数，data.docs.length始终只显示文档数，这是通过.limit（）确定的。我想我需要运行第二个单独的查询来捕获集合中的所有可用文档，并将其分配给TotalDoclNumber。