我已经使用名为react-pagination-js的库在我的React应用程序中实现了分页。当您单击下一个箭头时，它应该向前移动一页，而当您单击后退箭头时，它将使您返回一页。它可以工作，但是有一个错误，当单击后退或前进箭头时，您在最后一页上，它会继续进行迭代并加载黑页。我已经设法解决了后退箭头的问题，但是我无法弄清楚阻止前进按钮到达最后一页后停止迭代的逻辑。如何使活动页面位于最后一页时，按钮停止向前迭代？在这里发生这种逻辑：

// Change page
  const paginate = (pageNumber) => {
    if(pageNumber > 0  && pageNumber < pageNumber + 1) {
      setCurrentPage(pageNumber);
    }
  };

我尝试在我的if语句中添加&& pageNumber < pageNumber + 1，但它不起作用，这是完整的代码：

import React,{ useState,useEffect } from 'react';
import axios from 'axios';
import { BrowserRouter as Router,Route,} from 'react-router-dom';
import Header from '../src/components/Header/Header';
import Footer from '../src/components/Footer/Footer';
import Pagination from "react-pagination-js";

import Post from './components/Post/Post';


const App = () => {
  const [posts,setPosts] = useState([]);
  const [loading,setLoading] = useState(false);
  const [currentPage,setCurrentPage] = useState(1);
  const [postsPerPage] = useState(5);

  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get('myapilink');
      setPosts(res.data);
      console.log(res)
      setLoading(false);
    };

    fetchPosts();
  },[]);

  // Get current posts
  const indexOflastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOflastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost,indexOflastPost);

  // Change page
  const paginate = (pageNumber) => {
    if(pageNumber > 0  && pageNumber < pageNumber + 1) {
      setCurrentPage(pageNumber);
    }
  };

  return (
    <Router>
       <div classname="App">
         <Header/>
          <Route path="/Post"/>
           <div classname="column-container">
            <div classname="col">
            <Post 
           posts={currentPosts}
           loading={loading} 
           />
          <Pagination
          currentPage={currentPage}
          showFirstLastPages={true}
          sizePerPage={postsPerPage}
          totalSize={posts.length}
          totalPages={posts.length}
          changeCurrentPage={paginate}
        />
            </div>
           </div>
         <Footer/>
      </div>
     </Router>
  );
};

export default App;