Пустая страница с выбором - PullRequest
Новая
       15

Пустая страница с выбором

0 голосов
/ 28 октября 2019

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

Это мой код в компоненте разбиения на страницы, использующий response.js: 

import React, { useState } from 'react'

const Pagination = ({productsPerPage, totalPosts, paginate}) => {
const [currentPage, setCurrentPage] = useState(0)
const PageNumbers =[]
const int = Math.ceil(totalPosts / productsPerPage)

    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }


    return (
        <nav className="">
            <ul className="pagination">
                 {
                <a className="page-link" href="!#" onClick={() => 
                    { setCurrentPage(currentPage - 1);  
                    paginate(currentPage - 1); }}> Previous
                 </a>}

                        {PageNumbers.map(number => (          
                    (number < 3 || (number > currentPage-2 && number < currentPage+2) || 
                    number > PageNumbers.length - 2 )  ?
                        <li
                            key={number}
                            className={number === currentPage ? "page-item active" : "page-item "}
                        >
                            <a
                            onClick={() => paginate(number)}
                            href="!#"
                            className="page-link "
                            >
                                {number}
                            </a>
                        </li>

                        :

                        PageNumbers.length>5 && number < 4 ? <a className="page-link">...</a>
                        : 
                        number < PageNumbers.length && number == currentPage+2 ? <a className="page-link">...</a>
                        :null

                    ))}

                 {
                <a className="page-link" href="!#" onClick={() => 
                    {setCurrentPage(currentPage + 1); 
                    paginate(currentPage + 1); }}> Next 
                </a>}
            </ul>
        </nav>
    )
}

export default Pagination
...