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

Question

以下代码连接到 Cloud FireStore 集合并使用 setCards Hook 将所有数据保存在名为 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 提示说:

未处理的拒绝(TypeError):无法读取未定义的属性“customId”

我的做法对吗？ 我该如何解决？

Answer 1

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

事实上，你传递的是一个synthetic event给你的showNext通过这样做来发挥作用<button onClick={showNext}>Next</button> .

要真正传递你的卡片对象，你必须像这样调用你的函数:

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

---

至于你要求评论你的实现细节，我会把它放在评论中，因为这是一个意见(意味着在某些情况下它可能是错误的)