Как исправить ошибку в react-paginate?

Question

[AntonHPL]

По аналогии с этим вариантом https://codesandbox.io/s/bold-field-3eqql?file=/sr... попытался вывести свою пагинацию на основе react-paginate:
https://codesandbox.io/s/eager-oskar-471xm?file=/s...
Но репозитории и номера страниц не отображаются. Что неверно?

Answer 1

[Дмитрий Свиридов]

Дело в том, что для подсчёта pageCount нужно знать общее число результатов поиска. В data.length не оно, а ровно 10, потому что именно 10 передаётся в параметре per_page в GithubAPI. То есть 10 запросил - 10 получил. Соответственно, все 10 уменьшаются на 1 странице - и пагинация не отображается.

А репозитории не отображаются потому, что надо вот так:

useEffect(() => {
    if (user) {
      fetch(
        `//api.github.com/users/${user.login}/repos?page=${currentPage}&per_page=${PER_PAGE}`
      )
        .then((res) => res.json())
        .then(setData);
    }
  }, [user, currentPage]);

Тогда при изменении переменной user или currentPage будет отрабатывать useEffect

Comments

[AntonHPL]

В github есть user.public_repos - число всех найденных репозиториев. Количество страниц по-моему я вывел.
pageCount={Math.ceil(user.public_repos / PER_PAGE)} - если можно так вставлять, конечно, иначе если просто вставить const в коде, он пишет, что не может ее определить.
И Ваш кусок кода вставил.

Т. е. предполагается, что data.length -- не длина всего массива репозиториев., а просто n-я страничка просмотра, в которой не более 10 элементов? (PER_PAGE в данном случае равно 10)
Получается, нет смысла в slice? Я закомментировал удаленные фрагменты.

Но все равно ошибка: первая страница по содержанию равна второй и, скорее всего, вытесняет последнюю. Потому что при верном количестве всех страниц первые две одинаковы.

https://codesandbox.io/s/eager-oskar-471xm?file=/s...

[Дмитрий Свиридов]

AntonHPL, возможно, пагинацию надо с 1 начинать, а не с нуля

[AntonHPL]

Дмитрий Свиридов, const [currentPage, setCurrentPage] = useState(0); заменял
на const [currentPage, setCurrentPage] = useState(1); у меня не работает почему-то

А вот подправил здесь
function handlePageClick({ selected: selectedPage }) {
setCurrentPage(selectedPage + 1);
}

Получается,useState(0) или useState(1) не повлияло.

[Дмитрий Свиридов]

AntonHPL, https://codesandbox.io/s/runtime-feather-ffcy7?fil...

Вот так работает. Я page_size всего 2 выставил, т.к. у того юзера, что я проверял, всего 6 репозиториев

[AntonHPL]

Дмитрий Свиридов, Спасибо! Там еще маленький момент с подгрузкой. Подскажете? Не высвечивается Loading... во время подгрузки. Я отдельный вопрос для этого задал.

[Дмитрий Свиридов]

AntonHPL, Вам на него уже правильно там ответили.

[Дмитрий Свиридов]

AntonHPL, если я ответил правильно на ваш вопрос, отметьте его, пожалуйста, как правильный

[AntonHPL]

Дмитрий Свиридов, отметил, может быть, Вы знаете ответ на это вопрос? Как исправить подгрузку данных в react-paginate?