reactjs - React - Cloud FireStore - 如何向该组件添加分页？

Question

我正在尝试为这个 React 组件添加一个简单的分页。

首先，我运行一个查询来找出集合中的文档总数。接下来，在 useEffect 中，我运行第二个查询来显示数据。理想情况下，它应该在每页上显示 10 个文档。

import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
import UpdateCard from './UpdateCard';

const List = () => {
  const [cards, setCards] = useState([]);
  const [beginAfter, setBeginAfter] = useState(0);
  const [totalDoclNumbers, setTotalDoclNumbers] = useState(0);

  const docLimit = 10;

  const firstFetch = async () => {
    const data = await db
      .collection('FlashCards')
      .get();
    setTotalDoclNumbers(data.docs.length);
    console.log('totalDoclNumbers is: ' + totalDoclNumbers);
  };

  firstFetch();

  useEffect(() => {
    const fetchData = async () => {
      const data = await db
        .collection('FlashCards')
        .orderBy('customId', 'asc')
        .limit(docLimit)
        .startAfter(beginAfter)
        .get();
      setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));

    };
    fetchData();
  }, [beginAfter]);

  // Creating a menu for our documents (100 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'>
            <UpdateCard card={card} />
            <DeleteCard card={card} />
          </li>
        ))}
      </ul>
      <AddCard />
    </>
  );
};

export default List;

但是当我运行代码时，我得到了这个错误：RangeError: Invalid array length On the following line: const RenderDocumentMenu = () =>

标签： reactjsfirebasegoogle-cloud-firestore

Answer 1

OMG！，我发现了问题并可以解决它。原来，集合中的文档数量为58。

totalDoclNumbers是 58

文档限制为 10

因此结果： Array(totalDoclNumbers / docLimit) 是5.8

并且 JS 不知道如何处理 5.8。因为它应该是它必须为分页生成的链接数。

解决方案是将数字四舍五入（在本例中为 6）：

Array(Math.ceil(totalDoclNumbers / docLimit))

我可以使用 Math.round，但是如果我们只有 54 个文档在我们的集合中，这将被四舍五入到只有 5 个链接，我们的解决方案将忽略最后 4 个文档。

因此，为了涵盖这些情况，我使用Math.ceil将我们的数字向上舍入到最接近的整数。

现在分页正在工作，但我不确定这是否是完成它的最佳方式。

将不胜感激任何建议或改进的解决方案。