反应分页上的错误

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《反应分页上的错误》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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

我已经安装了这个 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 (
    <>
      

        {displayedItems && displayedItems.length > 0 ? (
          displayedItems.map((item) => (
            
              
            
          ))
        ) : (
          
No products available
        )}
      
      

        
      
    
  );
}
export default PaginationProdGrid;

理论要掌握，实操不能落！以上关于《反应分页上的错误》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！