反应分页上的错误

发布日期： 2024-09-18 阅读量： 1404 作者： 网络

反应分页上的错误

当我尝试在其他分页选项卡之间切换时，我在反应分页中遇到了一个小错误，每次切换时网格内容都会增加，我该如何修复这个错误，你知道吗

我已经安装了这个 npm 包
https://www.npmjs.com/package/react-paginate

我将在下面提供我部署的项目：
https://shoe-ecommerce-ez1c.vercel.app/

import React, { useState, useContext } from "react";
import ReactPaginate from "react-paginate";
import { ShopContext } from "./Context/ShopContext";
import Products from "./Components/Products";
import { Link } from "react-router-dom";

function PaginationProdGrid() {
  const { products } = useContext(ShopContext);
  const [currentPage, setCurrentPage] = useState(0);
  const itemsPerPage = 6;

  const displayedItems = products.slice(
    currentPage * itemsPerPage,
    (currentPage + 1) * itemsPerPage
  );


  const handlePageChange = (data) => {
    setCurrentPage(data.selected);
  };

  return (
    <>
      <div className="grid md:grid-cols-3 grid-cols-1 gap-4 m-8">
        {displayedItems && displayedItems.length > 0 ? (
          displayedItems.map((item) => (
            <Link key={item._id} to={`/productInfo/${item._id}`}>
              <Products
                name={item.name}
                image={item.image}
                price={item.price}
              />
            </Link>
          ))
        ) : (
          <p className="text-center">No products available</p>
        )}
      </div>
      <div className="flex justify-center">
        <ReactPaginate
          previousLabel={"previous"}
          nextLabel={"next"}
          breakLabel={"..."}
          breakClassName={"break-me"}
          pageCount={Math.ceil(products.length / itemsPerPage)}
          marginPagesDisplayed={2}
          pageRangeDisplayed={5}
          onPageChange={handlePageChange}
          containerClassName={
            "pagination flex items-center  text-black dark:text-white"
          }
          pageClassName={
            "px-3 py-2 rounded-md mx-1 "
          }
          previousClassName={
            "px-3 py-2 rounded-md mx-1  "
          }
          nextClassName={
            "px-3 py-2 rounded-md mx-1  "
          }
          activeClassName={"bg-blue-500 "}
        />
      </div>
    </>
  );
}
export default PaginationProdGrid;

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯31701 】【 SEO推广17678 】

上一篇: 微信小程序之开发者工具的快捷键介绍

反应分页上的错误

随便看看