React - 如何找出 FireStore 集合中的最后一个文档

Question

以下组件在挂载时连接到Cloud FireStore集合，并且仅显示一个文档.limit(1(。

每次用户单击"下一步"按钮时，都会向FireStore发送一个新请求，并显示集合中的下一个文档。

它工作正常。只有一个问题：

当用户多次单击"下一步"按钮并到达 FireStore 集合中的最后一个文档时，下一次单击会中断代码，这是有意义的。

我希望当到达最后一个文档时，接下来单击"下一步">按钮会显示第一个文档或至少显示一条消息，表明最后一个项目已到达。

我该怎么做？如何找到 FireStore 集合中的最后一个文档？

import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
const FlipCard = () => {
const [cards, setCards] = useState([]);
useEffect(() => {
const fetchData = async () => {
const data = await db
.collection('FlashCards')
.orderBy('customId', 'asc')
.limit(1)
.get();
setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
fetchData();
}, []);
const showNext = ({ card }) => {
const fetchNextData = async () => {
const data = await db
.collection('FlashCards')
.orderBy('customId', 'asc')
.limit(1)
.startAfter(card.customId)
.get();
setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
fetchNextData();
};
return (
<>
<div>
{cards.map((card) => (
<div className='card__face card__face--front'>
{<img src={card.imgURL} alt='' />}
{card.originalText}
</div>
<div className='card__face card__face--back'>
{card.translatedText}
</div>
</div>
))}
</div>
<div>
<button
onClick={() => showNext({ card: cards[cards.length - 1] })}
>
Next Card
</button>
</div>
</>
);
};
export default FlipCard;

Answer 1

知道集合中的文档不足的方法是当结果数 (cards.length( 小于查询限制 (.limit(1)(。

代码正在中断，因为它没有预料到这种情况：

onClick={() => showNext({ card: cards[cards.length - 1] })}
^ this expression might be -1

一种解决方法是仅在cards.length > 0时有条件地呈现按钮。

另一种方法是有条件地计算要显示的参数下一个...

{ card: cards.length > 0 ? cards[cards.length - 1] : {} }

。并在方法中处理这种情况。

Answer 2

只处理一个错误

const showNext = ({ card }) => {
const fetchNextData = async () => {
const data = await db
.collection('FlashCards')
.orderBy('customId', 'asc')
.limit(1)
.startAfter(card.customId)
.get()
.catch(error => {  console.log('end of the row') });
if(!data.docs.length) console.log('end of the row');
setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
fetchNextData();
};