[英]React - Cloud FireStore - How can I add pagination to this component?
我正在尝试为这个 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 = () =>
我的天啊,。 我发现了问题并且可以解决它。 原来,集合中的文档数量为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将我们的数字向上舍入到最接近的 integer。
现在分页正在工作,但我不确定这是否是完成它的最佳方式。
将不胜感激任何建议或改进的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.