我正在尝试使用称为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 => (...))}

09-17 08:53
查看更多