如何将第一页设为默认页面

Question

使用 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;

Answer 1

您的分页组件需要了解您的过滤器，我猜这些过滤器是由父组件管理的。一种简单的方法是将它们作为参数添加到您的组件中，以使其能够识别它们。

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

这样，你可以使用useEffect钩子实现一个监听器，只在filters改变时运行一些代码：

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;