如何使用ReactJs和挂钩对云FireStore数据进行分页

下面的代码连接到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，useffect}来自“React”；
从“../firebase”导入{db}；
常量动画卡=（）=>{
const[cards，setCards]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
常量数据=等待数据库
.收藏（“抽认卡”）
.orderBy（'customId'，'asc'）
.get（）；
setCards（data.docs.map（（doc）=>（{…doc.data（），id:doc.id}））；
};
fetchData（）；
}, []);
返回(
{cards.map（（card）=>(
{card.originalText}
{card.translatedText}
))}
);
};
导出默认动画卡；

为了给代码添加分页，我尝试了以下方法：

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;

import React，{useState，useffect}来自“React”；
从“../firebase”导入{db}；
常量动画卡=（）=>{
const[cards，setCards]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
常量数据=等待数据库
.收藏（“抽认卡”）
.orderBy（'customId'，'asc'）
.限额（1）
.get（）；
setCards（data.docs.map（（doc）=>（{…doc.data（），id:doc.id}））；
};
fetchData（）；
}, []);
常量showNext=（{card}）=>{
常量fetchNextData=async（）=>{
常量数据=等待数据库
.收藏（“抽认卡”）
.orderBy（'customId'，'asc'）
.限额（1）
.startAfter（卡.客户ID）
.get（）；
setCards（data.docs.map（（doc）=>（{…doc.data（），id:doc.id}））；
};
fetchNextData（）；
};
返回(
{cards.map（（card）=>(
{}
{card.originalText}
{card.translatedText}
))}
下一个
);
};
导出默认动画卡；

但React抱怨说：

未处理的拒绝（TypeError）：无法读取未定义的属性“customId”

我的方法正确吗？

---

如何修复它？

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

实际上，通过执行此

Next

操作，您正在将a传递给

showNext

函数

要实际传递卡对象，必须按如下方式调用函数：

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

showNext（{card:cards[cards.length-1]}>Next

---

---

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

您应该将卡片传递给

showNext

功能

showNext（{card:cards[cards.length-1]}）}>Next

听起来像是一个答案@kkesley:）天哪！它起作用了。谢谢你1000次。那我的方法呢？有什么我可以改进的吗？这是连接FireStore并显示数据的正确方式吗？分页方法足够好吗？再次感谢，伙计。@user1941537这是我对如何改进的看法（这不是答案的一部分）：通过创建另一个专注于获取数据的方法，您可以最大限度地减少初始获取和您的

showNext

方法的重复。