如何在React中实现分页的下一个和上一个按钮

Question

我已经在我的React项目中实现了一个简单的分页功能，目前效果很好，但是我想知道如何实现下一个和上一个按钮？下一个按钮应加载更多页面，而上一个按钮应仅显示现在已隐藏的页面。我试图通过这样划分总帖子长度来实现这一目标：

totalPosts={posts.length / 5}

并且通过在分页容器中添加增量和减量方法：

import React from 'react';

const Pagination = ({ postsPerPage, totalPosts, paginate, increment, decrement }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav className="nav">
      <button onClick={() => decrement(number++)}>Previous</button>
      <div className='nav__pagination'>
        {pageNumbers.map(number => (
          <li key={number} className='pagination__page-item'>
            <a onClick={() => paginate(number)} href='!#' className='pagination__page-link'>
              {number}
            </a>
          </li>
        ))}
      </div>
      <button onClick={() => decrement(number++)}>>></button>
    </nav>
  );

};

export default Pagination;

但是它不起作用，实现此目的的正确方法是什么？这是我的App.js：

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 './components/Pagination/Pagination';
import Post from './components/Post/Post';

const App = () => {
  const [posts, setPosts, pageNum] = 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('http://localhost:8080/');
      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) => setCurrentPage(pageNumber);

  // Increment, Decrement
  const increment = (number) => number++;
  const decrement = (number) => number--;

  return (
    <Router>
       <div className="App">
         <Header/>
          <Route path="/Post"/>
            <div className="col">
            <Post 
           posts={currentPosts}
           loading={loading} 
           />
           <Pagination
            postsPerPage={postsPerPage}
            totalPosts={posts.length / 5}
            paginate={paginate}
            increment={increment}
            decrement={decrement}
            />
            </div>
         <Footer/>
      </div>
     </Router>
  );
};

export default App;

和我的Post容器：

import React from 'react';

const Posts = ({ posts, loading }) => {
  if (loading) {
    return <div class="loader">
           <div class="spinner"></div>
           </div>
  }

  return (
     <div className="post-container">
         {posts.map(post => (
        <div key={post.id} className='post'>
          <img className="post-container__image" src={post.picture} alt="image"/>
            <div className="post-container__post">
              <div className="post-container__text">
                <h2 className="post-container__title">{post.title}</h2>
                <p className="post-container__date">{post.date}</p>
                <p className="post-info-container__text">{post.postContent.substring(0, 500) + "..."}</p>
                <button className="read-more-btn">Read more</button>
              </div>
            </div>
        </div>
      ))}
     </div>
  );
};

export default Posts;

Answer 1

[嘿，我将您的代码带到CodeSandbox，并对其进行了一些更改，以使其能够正常工作，并且没有样式，我确实将每页的帖子数设置为2，每条帖子有10个假帖子，以获得5页。希望对您有帮助。

https://codesandbox.io/s/pagination-fix-ubflx

基本上我使用useCallback并修复了分页组件。