如何使按钮分页在React中工作

Question

我有一个电影列表的12个对象的数组，我想使用React分页为它们创建分页，每页显示4个项目，我已经在UI上显示了这些项目，但即使单击"下一步"按钮，页数也不起作用。

这是我第一次在react中使用分页。

import './App.css';
import React,{useState} from 'react';
import MoviesData  from './components/Data/MoviesData';
import ReactPaginate from 'react-paginate';
function App() {
const [categories, setCategories] = useState(allCategories);
const [moviesList, setMoviesList] = useState(MoviesData.slice(0, 4));
const [pageNumber, setPageNumber] = useState(0);

const moviePerPage = 4;
//to determinate how many pages we going to have
const pageCount = Math.ceil(moviesList.length / moviePerPage);
const changePage = ({ selected }) => {
setPageNumber(selected);
};

return (
<main>
<MoviesCards moviesList ={moviesList} removeMovie={removeMovie}  />
<ReactPaginate
previousLabel={"Previous"}
nextLabel={"Next"}
pageCount={pageCount}
onPageChange={changePage}
containerClassName={"paginationBttns"}
previousLinkClassName={"previousBttn"}
nextLinkClassName={"nextBttn"}
disabledClassName={"paginationDisabled"}
activeClassName={"paginationActive"}
/>
</main>

)
}
export default App;

这个我显示我的项目的组件：

import React from 'react';
import SingleMovieCard from '../SingleMovieCard/SingleMovieCard';
const MoviesCards = ({moviesList}) => {
return (
<section>
<div className="title">
<h2>Welcome to the box office</h2>
</div>

<div >
{moviesList.map((singleMovie)=>  {
return(
<SingleMovieCard singleMovie={singleMovie}
key={singleMovie.id}
removeMovie={removeMovie} />
)
})}
</div>
</section>

)
}

export default MoviesCards;

Answer 1

存在一些问题。我将在这里列出：

const pageCount = Math.ceil(moviesList.length / moviePerPage);

应该是：

const pageCount = Math.ceil(MoviesData.length / moviePerPage);

这是因为你的页面计数是相对于整个电影计数的，而不仅仅是页面计数，这是你存储的状态

另一个问题是你的页面管理，第一个问题是可以的，但每次你更改页面时，你都需要用新的电影列表来设置它。这意味着您需要一个useEffect来跟踪pageNumber中的更改，然后设置您的moviesList，类似于以下内容：

useEffect(() => {
setMoviesList(MoviesData.slice(pageNumber * 4, (pageNumber + 1) * 4));
}, [pageNumber]);

我做了一个简单的案例：

import React, { useEffect, useState } from "react";
import ReactPaginate from "react-paginate";
const MoviesData = [
{ title: "Foo", category: "horror" },
{ title: "Foo1", category: "horror" },
{ title: "Foo2", category: "horror" },
{ title: "Foo3", category: "horror" },
{ title: "Bar", category: "horror" },
{ title: "Bar1", category: "horror" },
{ title: "Bar2", category: "horror" },
{ title: "Bar3", category: "horror" }
];
const SingleMovieCard = ({ singleMovie }) => {
return <div>{singleMovie.title}</div>;
};
const MoviesCards = ({ moviesList }) => {
return (
<section>
<div className="title">
<h2>Welcome to the box office</h2>
</div>
<div>
{moviesList.map((singleMovie) => {
return (
<SingleMovieCard singleMovie={singleMovie} key={singleMovie.id} />
);
})}
</div>
</section>
);
};
function App() {
const [pageNumber, setPageNumber] = useState(0);
const [moviesList, setMoviesList] = useState(MoviesData.slice(0, 4));
const moviePerPage = 4;
const pageCount = Math.ceil(MoviesData.length / moviePerPage);
useEffect(() => {
setMoviesList(MoviesData.slice(pageNumber * 4, (pageNumber + 1) * 4));
}, [pageNumber]);
const changePage = ({ selected }) => {
console.log(selected);
setPageNumber(selected);
};
return (
<main>
<MoviesCards moviesList={moviesList} />
<ReactPaginate
previousLabel={"Previous"}
nextLabel={"Next"}
pageCount={pageCount}
onPageChange={changePage}
containerClassName={"paginationBttns"}
previousLinkClassName={"previousBttn"}
nextLinkClassName={"nextBttn"}
disabledClassName={"paginationDisabled"}
activeClassName={"paginationActive"}
/>
</main>
);
}
export default App;