使用分页每页分配五个帖子是行不通的

Question

我正在尝试使用名为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;

Answer 1

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

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

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

但是您要渲染的内容在以下位置定义：

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

所以我建议尝试使用

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