使用分页每页显示五个帖子不起作用答案

【问题标题】：Dispalying five posts per page using pagination does not work使用分页每页显示五个帖子不起作用
【发布时间】：2020-02-10 01:09:22
【问题描述】：

我正在尝试使用名为 react-pagination-js 的库向我的网站添加分页。我想每页列出 5 个帖子，并在用户单击库生成的另一个链接时更改页面。目前，我列出了我数据库中的所有帖子，而不是只有五个，我不知道为什么。我该如何解决这个问题？我在控制台中没有任何错误。我尝试console.logposts 数组，它控制台记录了两次，第一次是一个空数组，然后它被归档了所有数据，也许这是问题的一部分。

这是我的页面组件，其中包含帖子的呈现和分页组件：

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import SecondColumn from '../SecondColumn/SecondColumn';
import Pagination from "react-pagination-js";
import axios from 'axios';

const Posts = () => {

  const [posts, setPosts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(5);
  const GET_POSTS_API = process.env.REACT_APP_GET_POSTS_API

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await axios.get(GET_POSTS_API);
      setPosts(res.data);
    };

    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) {
      setCurrentPage(pageNumber);
    }
  }

  return (
    <div className="row">
      <div className="column">
        {posts.map(post => (
          <div key={post._id} className='post'>
            <img className="post-container__image" src={post.picture} alt="avatar" />
            <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>
                <Link to={`/post/${post._id}`} className="read-more-btn">
                  <button className="read-more-btn">Read more</button>
                </Link>
              </div>
            </div>
          </div>
        ))}
        <Pagination
          currentPage={currentPage}
          currentPosts={currentPosts}
          showFirstLastPages={true}
          sizePerPage={postsPerPage}
          totalSize={posts.length}
          totalPages={posts.length}
          changeCurrentPage={paginate}
        />
      </div>
      <div className="column">
        <SecondColumn />
      </div>
    </div>
  )
};

export default Posts;

以及我在其中显示它的其他组件：

import React from 'react';
import Posts from '../Posts/Posts';

const FirstColumn = () => {


  return (
    <div>
      <div>
        <Posts />
      </div>
    </div>
  );
};

export default FirstColumn;

【问题讨论】：

标签： javascript reactjs pagination

【解决方案1】：

我第一眼看到的：它会列出所有帖子，因为这就是您在这里所做的：

{posts.map(post => (...))}

而且你的帖子数组只定义一次，在你从你的 fetch 函数得到响应之后。

但是你要渲染的定义在：

const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

所以我建议尝试使用

{currentPosts.map(post => (...))}

【讨论】：