React - Как узнать последний документ в коллекции FireStore - PullRequest
Новая
       1

React - Как узнать последний документ в коллекции FireStore

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

Следующий компонент подключается к коллекции Cloud FireStore при ее подключении и показывает только один документ .limit (1).

Каждый раз, когда пользователь нажимает кнопку Next , создается новый запрос. отправлено в FireStore и показывает следующий документ из коллекции.

Он работает нормально. Есть только одна проблема:

Когда пользователь нажимает кнопку «Далее» несколько раз и достигает последнего документа в коллекции FireStore, следующий щелчок нарушает код, что имеет смысл.

Я хочу это при достижении последнего документа при следующем нажатии кнопки Далее отображается первый документ или, по крайней мере, сообщение о том, что достигнут последний элемент.

Как я могу это сделать? Как узнать последний документ в коллекции FireStore? 

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>
        {cards.map((card) => (
            <div className='card__face card__face--front'>
              {<img src={card.imgURL} alt='' />}
              {card.originalText}
            </div>
            <div className='card__face card__face--back'>
              {card.translatedText}
            </div>
          </div>
        ))}
      </div>
      <div>
        <button
          onClick={() => showNext({ card: cards[cards.length - 1] })}
        >
          Next Card
        </button>
      </div>
    </>
  );
};

export default FlipCard;

Ответы [ 2 ]

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

Способ узнать, что у вас закончились документы в коллекции, - это когда количество результатов (cards.length) меньше предела запроса (.limit(1)).

Код ломается, потому что не ожидает этого условия: 

onClick={() => showNext({ card: cards[cards.length - 1] })}
                                      ^ this expression might be -1

Один из способов исправить - условно отобразить кнопку, только если cards.length > 0.

Другой способ - условно вычислить параметр to showNext ... 

{ card: cards.length > 0 ? cards[cards.length - 1] : {} }

... и обработать этот случай в методе.

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

просто обработать ошибку 

const showNext = ({ card }) => {
    const fetchNextData = async () => {
      const data = await db
        .collection('FlashCards')
        .orderBy('customId', 'asc')
        .limit(1)
        .startAfter(card.customId)
        .get()
        .catch(error => {  console.log('end of the row') });

        if(!data.docs.length) console.log('end of the row');

      setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };

    fetchNextData();
  };
...