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

我有一个包含12个电影列表对象的数组，我想使用React paginate为它们创建分页，通过为每个页面显示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'/App.css'；
从“React”导入React，{useState}；
从“/components/Data/MoviesData”导入MoviesData；
从“react paginate”导入react paginate；
函数App（）{
const[categories，setCategories]=useState（所有类别）；
const[moviesList，setMoviesList]=useState（MoviesData.slice（0,4））；
常量[pageNumber，setPageNumber]=useState（0）；
const moviePerPage=4；
//确定我们将有多少页
const pageCount=Math.ceil（moviesList.length/moviePerPage）；
const changePage=（{selected}）=>{
设置页码（已选择）；
};
返回(
)
}
导出默认应用程序；

此组件用于显示我的项目：

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;

从“React”导入React；
从“../SingleMovieCard/SingleMovieCard”导入SingleMovieCard；
康斯特电影卡=（{moviesList}）=>{
返回(
欢迎来到票房
{moviesList.map（（singleMovie）=>{
返回(
)
})}
)
}
导出默认电影卡；

有一些问题。我会在这里列出：

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

应该是：

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

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

另一个问题是页面管理，第一个是可以的，但是每次更改页面时，都需要使用新的电影列表进行设置。这意味着您需要一个

useffect

来跟踪

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;

import React，{useffect，useState}来自“React”；
从“react paginate”导入react paginate；
常数MoviesData=[
{标题：“福”，类别：“恐怖”}，
{标题：“Foo1”，类别：“恐怖”}，
{标题：“Foo2”，类别：“恐怖”}，
{标题：“Foo3”，类别：“恐怖”}，
{标题：“酒吧”，类别：“恐怖”}，
{标题：“Bar1”，类别：“恐怖”}，
{标题：“Bar2”，类别：“恐怖”}，
{标题：“Bar3”，类别：“恐怖”}
];
const SingleMovieCard=（{singleMovie}）=>{
返回{singleMovie.title}；
};
康斯特电影卡=（{moviesList}）=>{
返回(
欢迎来到票房
{moviesList.map（（singleMovie）=>{
返回(
);
})}
);
};
函数App（）{
常量[pageNumber，setPageNumber]=useState（0）；
const[moviesList，setMoviesList]=useState（MoviesData.slice（0,4））；
const moviePerPage=4；
const pageCount=Math.ceil（MoviesData.length/moviePerPage）；
useffect（（）=>{
setMoviesList（MoviesData.slice（页码*4，（页码+1）*4））；
}，[pageNumber]）；
const changePage=（{selected}）=>{
console.log（选中）；
设置页码（已选择）；
};
返回(
);
}
导出默认应用程序；

非常感谢你，伙计，今天我从你身上学到了很多。作为一名开发javascript和反应技能的新手，您对我有什么建议：Dstackoverflow是一个学习的好地方。不过，我建议您也阅读react文档，阅读来自优秀开源库的大量代码。再次感谢您的帮助和建议Vinicius