Как сделать страницу номер один страницей по умолчанию - PullRequest
Новая
       7

Как сделать страницу номер один страницей по умолчанию

0 голосов
/ 03 ноября 2019

Используя React.js, когда я переключаюсь между кнопками фильтров, я хочу, чтобы разбиение на страницы возвращалось на первую страницу (номер один).

Это мой код в компоненте разбиения на страницы: 

import React, { useState } from 'react'

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

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

    return (
        <nav className="">
            <ul className="pagination">

            <li className={currentPage === 1 ? 'disabled' : ''}>
                    <a onClick={() =>{setCurrentPage(currentPage - 1); paginate(currentPage - 1);}}>Previous</a>
                </li>
                        {PageNumbers.map(number => (          

                        <li
                            key={number}
                            className={number === currentPage ? "page-item active" : "page-item "}
                        >
                            <a
                            onClick={() => paginate(number)}
                            href="!#"
                            className="page-link "
                            >
                                {number}   
                            </a>
                        </li>                                       
                    ))}
                <li className={currentPage === int ? 'disabled' : ''}>
                    <a onClick={() => {setCurrentPage(currentPage + 1);  paginate(currentPage + 1); }}>Next</a>
                </li>   
            </ul>
        </nav>
    )
}

export default Pagination

Это главное приложение 

const App = () => {
  const [itemsAmount] = useState(100); 
  const [fromProduct, setFromProduct] = useState(1);
  const [keys, setKeys] = useState([]);
  const [products, setProducts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [productsPerPage, setProductsPerPage] = useState(10); 

 useEffect(() => {
    axios('The API link')
    .then(res => {
    setProducts(res.data.itemsList);

    res.data.itemsList[0] && 
    setKeys(Object.keys(res.data.itemsList[0]).map((key, index) => key));
    })

  }, [Organization, HardWareStatuses, hardvarutyp, fromProduct, 
      itemsAmount,setProductsPerPage]);

  /* Get current products*/
  const indexOfLastProduct  = currentPage * productsPerPage;
  const indexOfFirstProduct  = indexOfLastProduct  - productsPerPage;
  const currentProducts = 
  products.slice(indexOfFirstProduct,indexOfLastProduct );
  /* Change page */
  const paginate = pageNumber => setCurrentPage(pageNumber) 
  return (
    <div>
  {/* Create pagination */}  
        <div className="">
       <Pagination 
                productsPerPage={productsPerPage} 
                totalProducts={products.length}
                paginate={paginate}
                filters ={filters}
       />
       </div>
  </div>
      <Products products={currentProducts} keys={keys} />
      <ExportCSV products={products} keys={keys} />
  </div>   
  );
};

export default App;

1 Ответ

0 голосов
/ 03 ноября 2019

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

<Pagination productsPerPage="productsPerPage" totalPosts="totalPosts" paginate="paginate" filters="filters"/>

Таким образом, вы можете реализовать прослушиватель для запуска некоторого кода только при изменении filters, используя useEffect hook: 

import React, { useState, useEffect } from 'react'

const Pagination = ({productsPerPage, totalPosts, paginate, filters}) => {

    const [currentPage, setCurrentPage] = useState(1)
    const PageNumbers =[]
    const int = Math.ceil(totalPosts / productsPerPage)

    useEffect(() => {
        setCurrentPage(1);
    }, [filters]);

    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav className="">
          ...
        </nav>
    )
}

export default Pagination;
...