当我尝试在其他分页选项卡之间切换时，我在反应分页中遇到了一个小错误，每次切换时网格内容都会增加，我该如何修复这个错误，你知道吗我已经安装了这个 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}"></products> )) ) : ( <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="{" flex items-center text-black dark:text-white pageclassname="{" py-2 rounded-md mx-1 previousclassname="{" nextclassname="{" activeclassname='{"bg-blue-500'></reactpaginate></div> > );}export default PaginationProdGrid;登录后复制 以上就是反应分页上的错误的详细内容，更多请关注我的其它相关文章！
标签：gt,const,分页,错误,react,反应,import,displayedItems From： https://www.cnblogs.com/aow054/p/18424867