如何使用 ReactJs 和 Hooks 对 Cloud FireStore 数据进行分页

Question

以下代码连接到Cloud FireStore集合，并使用setCards钩子将所有数据保存在称为cards的数组中。 接下来，它映射到卡片数组并在单个页面上显示所有这些卡片：

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')
.get();
setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
fetchData();
}, []);
return (
<div className='scene'>
{cards.map((card) => (
<div key={card.id}>
<div>
{card.originalText}
</div>
<div>
{card.translatedText}
</div>
</div>
))}
</div>
);
};
export default FlipCard;

为了向代码添加分页，我尝试了这个：

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 className='scene'>
{cards.map((card) => (
<div key={card.id}>
<div>
{<img src={card.imgURL} alt='' />}
{card.originalText}
</div>
<div>
{card.translatedText}
</div>
</div>
))}
</div>
<button onClick={showNext}>Next</button>
</>
);
};
export default FlipCard;

但 React 抱怨说：

未处理的拒绝(类型错误(：无法读取未定义的属性"自定义 Id">

我的方法对吗？ 我该如何解决它？

Answer 1

您收到此未定义的错误，因为您没有在 onClick 处理程序中传递卡对象。

实际上，您正在通过执行此<button onClick={showNext}>Next</button>将合成事件传递给showNext函数。

要实际传递你的卡对象，你必须像这样调用你的函数：

<button onClick={() => showNext({card: cards[cards.length - 1]})}>Next</button>

---

至于您要求对实现细节发表评论，我会将其放在评论中，因为这是一种意见(这意味着在某些情况下可能是错误的(