时间戳

首页 > 解决方案 > 如何使用 ReactJs 和 Hooks 对 Cloud FireStore 数据进行分页

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

问题描述

以下代码连接到 Cloud FireStore 集合，并使用setCards挂钩将所有数据保存在名为卡片的数组中。接下来，它映射到卡片数组并将它们全部显示在一个页面上：

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”

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

标签： reactjsgoogle-cloud-firestorereact-hooks

解决方案

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

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

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

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

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

推荐阅读