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

Question

在下面的代码中，我使用totalDoclNumbers和docLimit来创建一种分页。 如果我为totalDoclNumbers分配一个 static 编号，一切正常。

但我希望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;

但后来我得到这个错误：'docs' is not defined no-undef

导致问题的行是这一行： setTotalDoclNumbers(docs.length - 1);

我的方法有什么问题？

Answer 1

很明显，在您的 useEffect 中，您需要使用data.docs访问docs 。

像这样

...
setTotalDoclNumbers(data.docs.length - 1); 
...

请注意 - data.docs可以是一个空数组，因此在这种情况下，您正在执行类似setTotalDoclNumbers(-1)的操作。 所以请注意。