Как разбить данные Cloud FireStore на страницы с помощью ReactJs и хуков - PullRequest
Новая
       1

Как разбить данные Cloud FireStore на страницы с помощью ReactJs и хуков

3 голосов
/ 19 июня 2020

Следующий код подключается к коллекции Cloud FireStore и сохраняет все данные в массиве под названием cards с помощью ловушки 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 из undefined

Правильно ли мой подход? Как исправить?

1 Ответ

1 голос
/ 20 июня 2020

Вы получили эту неопределенную ошибку, потому что вы не передаете объект карты в обработчике onClick.

Фактически, вы передаете syntheti c event в свой showNext функция, выполнив это <button onClick={showNext}>Next</button>.

Чтобы фактически передать объект вашей карты, вы должны вызвать свою функцию следующим образом: 

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

Что касается вашего запроса, чтобы прокомментировать детали вашей реализации, я бы поместил это в комментарий, так как это мнение (что означает, что при определенных обстоятельствах оно может быть неправильным)

...