React - Cloud FireStore - Как добавить нумерацию страниц к этому компоненту? - PullRequest
Новая
       0

React - Cloud FireStore - Как добавить нумерацию страниц к этому компоненту?

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

Я пытаюсь добавить простую разбивку на страницы для этого компонента React.

Сначала я запускаю запрос, чтобы узнать общее количество документов в коллекции. Затем внутри useEffect я запускаю второй запрос, чтобы показать данные. В идеале он должен отображать 10 документов на каждой странице. 

import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
import UpdateCard from './UpdateCard';

const List = () => {
  const [cards, setCards] = useState([]);
  const [beginAfter, setBeginAfter] = useState(0);
  const [totalDoclNumbers, setTotalDoclNumbers] = useState(0);

  const docLimit = 10;

  const firstFetch = async () => {
    const data = await db
      .collection('FlashCards')
      .get();
    setTotalDoclNumbers(data.docs.length);
    console.log('totalDoclNumbers is: ' + totalDoclNumbers);
  };

  firstFetch();

  useEffect(() => {
    const fetchData = async () => {
      const data = await db
        .collection('FlashCards')
        .orderBy('customId', 'asc')
        .limit(docLimit)
        .startAfter(beginAfter)
        .get();
      setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));

    };
    fetchData();
  }, [beginAfter]);

  // Creating a menu for our documents (100 documents per each menu)
  const RenderDocumentMenu = () =>
    Array(totalDoclNumbers / docLimit)
      .fill()
      .map((_, i) => {
        const onClick = () => setBeginAfter(docLimit * i);
        return (
          <div key={i} className='document__set' onClick={onClick}>
            {docLimit * i + 1} to {docLimit * i + docLimit} Data
          </div>
        );
      });

  return (
    <>
      <div className='document'>
        <RenderDocumentMenu />
      </div>

      <ul className='list'>
        {cards.map((card) => (
          <li key={card.id} className='list__item'>
            <UpdateCard card={card} />
            <DeleteCard card={card} />
          </li>
        ))}
      </ul>
      <AddCard />
    </>
  );
};

export default List;

Но когда я запускаю код, я получаю эту ошибку: RangeError: Недопустимая длина массива В следующей строке: const RenderDocumentMenu = ( ) =>

1 Ответ

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

OMG !, я нашел проблему и могу ее исправить. Оказалось, что количество документов в коллекции было 58 .

totalDoclNumbers 58

docLimit равно 10

Следовательно, результат: Array (totalDoclNumbers / docLimit): 5.8

И JS не знал, что делать с 5.8. Как и должно быть количество ссылок, которые он должен генерировать для разбивки на страницы.

Решение округляло число (в данном случае до 6): 

Array(Math.ceil(totalDoclNumbers / docLimit))

Я мог бы использовать Math .round, но тогда, если бы в нашей коллекции было, скажем, 54 документа, которые были бы округлены до 5 ссылок, наше решение проигнорировало бы последние 4 документа.

Поэтому, чтобы охватить эти случаи, я Я использую Math.ceil для округления нашего числа в сторону увеличения до ближайшего целого.

Теперь разбивка на страницы работает, но я не уверен, что это лучший способ выполнить sh it.

Был бы признателен за любую рекомендацию или улучшенное решение.

...