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)的操作。 所以請注意。