Отображение пяти сообщений на странице с использованием нумерации страниц не работает - PullRequest
Новая
       5

Отображение пяти сообщений на странице с использованием нумерации страниц не работает

0 голосов
/ 08 февраля 2020

Я пытаюсь добавить нумерацию страниц на свой сайт, используя библиотеку под названием 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;

1 Ответ

1 голос
/ 08 февраля 2020

То, что я вижу на первый взгляд: в нем отображаются все сообщения, перечисленные ниже, потому что это то, что вы делаете здесь: 

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

И ваш массив сообщений определяется только один раз, после того, как вы получили ответ от Ваша функция извлечения.

Но то, что вы хотите визуализировать, определяется в: 

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

Поэтому я предлагаю попробовать использовать 

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