分页未显示所需的页数答案

【问题标题】：Pagination not displaying desired amount of pages分页未显示所需的页数
【发布时间】：2019-12-15 19:16:15
【问题描述】：

我正在使用 React 构建一个小项目，我想在我的组件中实现分页。我正在使用一个名为react-pagination-js 的库。到目前为止，分页在页面中移动，但它没有显示我定义为 6 的每页正确的帖子数量？我怎样才能让它工作？目前它显示 30 个帖子。这是我的代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Pagination from "react-pagination-js";
import Spinner from '../Spinner/Spinner';
import { Link } from 'react-router-dom';
import Footer from '../Footer/Footer.jsx';
import CustomHeader from '../CustomHeader/CustomHeader.jsx';
import BlogCategoriesMenu from '../BlogCategoriesMenu/BlogCategoriesMenu.jsx';


const Planets = () => {

  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(6);


  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get('https://astroecstatic-express.herokuapp.com/');
      setPosts(res.data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <Spinner/>
  }


  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
  const title = 'Articles';

  const retrogradesPosts = posts.filter( (item) => {
            return item.categories === 'retrogrades'
          })

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

  return (
      <div>
            <CustomHeader
               title={title}
              />
              <BlogCategoriesMenu/>
           <div className="planet-articles-container">
          <div className="">
          {retrogradesPosts.map(post => (
          <div key={post._id} className="planet-articles-container__post">
          <img className="planet-articles-container__post-img" src={post.picture} alt="avatar"/>
          <div className="">
           <h2 className="">{post.date}</h2>
            <Link  to={`/post/${post._id}`}> <p className="">{post.title}</p></Link>
           <p className="planet-articles-container__post-text">{post.postContent.substring(0, 100) + "..."}</p>
        </div>
        </div>


          ))}
    </div>
    <Pagination
      currentPage={currentPage}
      showFirstLastPages={true}
      sizePerPage={postsPerPage}
      totalSize={retrogradesPosts.length}
      totalPages={retrogradesPosts.length}
      changeCurrentPage={paginate}
    />
    </div>
    </div>
  );
};

export default Planets;

【问题讨论】：

“每页显示的帖子数量不正确”是什么意思？那么它会显示多少帖子呢？
显示 30 个帖子

标签： reactjs pagination

【解决方案1】：

在您的代码中，您正在迭代并显示retrogradesPosts 对象中的所有帖子。当页码为 1 时应仅显示前 6 个，第 2 页应仅显示后 6 个，依此类推。你可以这样做：

const retrogradesPosts = posts.filter( (item) => {
            return item.categories === 'retrogrades'
          })

//get the element number where to start the slice from
const start_from = currentPage * postsPerPage;
//get the element number where to end the slice
const end_on = start_from + postsPerPage;

const postsToDisplay = retrogradesPosts.slice(start_from, end_on)

然后映射postsToDisplay 并渲染帖子而不是retrogradesPosts。

{postsToDisplay.map(post => (
          <div key={post._id} className="planet-articles-container__post">
          <img className="planet-articles-container__post-img" src={post.picture} alt="avatar"/>
          <div className="">
           <h2 className="">{post.date}</h2>
            <Link  to={`/post/${post._id}`}> <p className="">{post.title}</p></Link>
           <p className="planet-articles-container__post-text">{post.postContent.substring(0, 100) + "..."}</p>
        </div>
        </div>


          ))}

【讨论】：