我正在尝试使用称为react-pagination-js
的库向我的网站添加分页。我想每页列出5个帖子,并在用户单击库生成的另一个链接时更改页面。目前,我列出了数据库中的所有帖子,而不是列出的所有帖子,而且我不知道为什么。如何解决此问题?我在控制台中没有任何错误。我尝试对console.log
数组进行posts
,并对其进行了两次控制台记录,第一次是一个空数组,然后将其与所有数据一起归档,也许这就是问题的一部分。
这是我的页面组件,其中包含帖子的呈现和分页组件:
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;
最佳答案
乍看之下:
它会列出所有帖子,因为这是您在这里所做的:
{posts.map(post => (...))}
在获取函数的响应后,您的posts数组仅定义一次。
但是要渲染的内容定义为:
const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
所以我建议尝试使用
{currentPosts.map(post => (...))}