Добавить номер страницы в url - реагировать на пагинацию - PullRequest
Новая
       48

Добавить номер страницы в url - реагировать на пагинацию

0 голосов
/ 11 июля 2020

Я пытаюсь добавить номер страницы в URL-адрес (в конце моей функции useEffect), но теперь переход на другую страницу больше не будет работать, каждый раз, когда я нажимаю на страницу 2, я просто возвращаюсь на страницу 1, Кто-нибудь может увидеть, что я здесь сделал не так? Я добавил свой Listcomponent, свой компонент разбивки на страницы и свое приложение. js.

BooksList. js

import React, { useState, useEffect } from "react";

import queryString from "query-string";
import Books from "./Books";
import Pagination from "./Pagination";
import axios from "axios";
import { useHistory, useLocation } from "react-router-dom";

import { Container } from "react-bootstrap";

const BooksList = () => {
  const location = useLocation();
  const history = useHistory();
  const path = window.location.pathname;
  const initialQueryString = queryString.parse(location.search);
  const initialPageNumber = Number(initialQueryString.page) || 1;

  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [currentPage, setCurrentPage] = useState(initialPageNumber);
  const [booksPerPage, setBooksPerPage] = useState(5);

  useEffect(() => {
    const fetchBooks = async () => {
      try {
        setError(false);
        setLoading(true);
        const res = await axios.post("http://nyx.vima.ekt.gr:3000/api/books");

        setBooks(res.data.books);

        setLoading(false);
      } catch (err) {
        console.log(err);
        setError(true);
        setLoading(false);
        setBooks([]);
      }
    };

    fetchBooks();
    history.push(`${path}?page=${currentPage}`);
  }, [currentPage, history, path]);

  const indexOfLastBook = currentPage * booksPerPage;
  const indexOfFirstBook = indexOfLastBook - booksPerPage;
  const currentBooks = books.slice(indexOfFirstBook, indexOfLastBook);
  const paginate = pageNumber => setCurrentPage(pageNumber);

  if (error) return <div>Error message</div>;

  return (
    <Container>
      <Books books={currentBooks} loading={loading} />
      <Pagination
        booksPerPage={booksPerPage}
        booksAmount={books.length}
        paginate={paginate}
      />
    </Container>
  );
};

export default BooksList;

Pagination. js

import React from "react";

const Pagination = ({ booksPerPage, booksAmount, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i < Math.ceil(booksAmount / booksPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <div className="container mt-5">
      <nav>
        <ul className="pagination">
          {pageNumbers.map(number => {
            return (
              <li className="page-item" key={number}>
                <a
                  href="!#"
                  onClick={() => paginate(number)}
                  className="page-link"
                >
                  {number}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </div>
  );
};

export default Pagination;

Прил. js

import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import BooksList from "./components/BooksList";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={BooksList} />
        <BooksList />
      </Switch>
    </Router>
  );
};

export default App;

1 Ответ

0 голосов
/ 11 июля 2020

Добавьте эту строку в метод onClick в Pagination. js: 

e.preventDefault();

Вот код: 

return (
    <div className="container mt-5">
      <nav>
        <ul className="pagination">
          {pageNumbers.map((number) => {
            return (
              <li className="page-item" key={number}>
                <a
                  href="!#"
                  onClick={(e) => {
                    paginate(number);
                    e.preventDefault();
                  }}
                  className="page-link"
                >
                  {number}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </div>
  );
};

В основном страница перерисовывается / обновляется каждый раз вы нажимаете кнопки, и все данные теряются. Таким образом, ваша страница возвращается к состоянию по умолчанию.

...