Reactjs 使用分页组件中的next和prev函数作为道具，在材质ui中使用分页自定义挂钩

我使用了一个定制的钩子对材质ui进行分页。该组件在第一页可以正常工作，但是调用

next（）

，

prev（）

和

jump（）

不起作用。我试图将

next={next}

作为道具传递。我已经阅读了api文档，但找不到调用上述函数的正确方法。 下面是usePagination.jsx自定义挂钩的代码

import React, { useState } from "react";
function usePagination(data, itemsPerPage) {
    const [currentPage, setCurrentPage] = useState(1);
    const maxPage = Math.ceil(data.length / itemsPerPage);

    function currentData() {
      const begin = (currentPage - 1) * itemsPerPage;
      const end = begin + itemsPerPage;
      return data.slice(begin, end);
    }

    function next() {
      setCurrentPage((currentPage) => Math.min(currentPage + 1, maxPage));
    }

    function prev() {
      setCurrentPage((currentPage) => Math.max(currentPage - 1, 1));
    }

    function jump(page) {
      const pageNumber = Math.max(1, page);
      setCurrentPage((currentPage) => Math.min(pageNumber, maxPage));
    }

    return {
      next, prev, jump, currentData,
      currentPage, maxPage
    };
}

export default usePagination;

这是我的Courses.jsx，我想在这里显示带分页的课程列表

import React, { useState, useEffect } from "react";
import {connect} from 'react-redux';
import CourseList from "./CourseList" ;
import usePagination from "./usePagination";
import * as actions from "../_actions/courseActions";
import CourseForm from "./CourseForm";
import { Grid, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, withStyles, ButtonGroup, Button } from "@material-ui/core";
import  { useToasts } from "react-toast-notifications";
import { makeStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';
const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      marginTop: theme.spacing(2),
    },
  },
}));


  const Courses =(props)=> {


    const classes = useStyles();

      useEffect(() => {
        props.fetchAllCourses()


        }, [])
           // pagination code here
          const { next, prev,
             jump, currentData,
            currentPage, maxPage }
             =usePagination(props.courseList,4);

             console.log("total pages:"+ maxPage)

        return( 
           <div >

        <CourseList
             courseList={currentData()}

             deleteCourse={props.deleteCourse}
             createCourse={props.createCourse}
             updateCourse={props.updateCourse}


               />



              <div className={classes.root}>

      <Pagination count={maxPage}

       color="primary" />

    </div> 
    </div> 
                );    

    }
    const mapStateToProps= (state) =>({
        courseList:state.course.list


    })
    const mapActionToProps={
        fetchAllCourses:actions.fetchAll,
        deleteCourse:actions.Delete,
        createCourse:actions.create,
        updateCourse:actions.update,
        fetchCourse:actions.fetchById

           }
    export default connect(mapStateToProps,mapActionToProps)(Courses);

import React，{useState，useffect}来自“React”；
从'react redux'导入{connect}；
从“/CourseList”导入课程列表；
从“/usePagination”导入usePagination；
从“./\u actions/courseActions”导入*作为操作；
从“/CourseForm”导入CourseForm；
从“@material ui/core”导入{Grid，Paper，TableContainer，Table，TableHead，TableRow，TableCell，TableBody，with styles，ButtonGroup，Button}；
从“react toast notifications”导入{useToasts}；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/lab/Pagination”导入分页；
const useStyles=makeStyles（（主题）=>({
根目录：{
'& > *': {
marginTop：主题。间距（2），
},
},
}));
康斯特课程=（道具）=>{
const classes=useStyles（）；
useffect（（）=>{
props.fetchAllCourses（）
}, [])
//这里是分页代码
const{next，prev，
跳转，当前数据，
currentPage，maxPage}
=使用分页（道具课程列表，4）；
console.log（“总页数：+maxPage”）
报税表（
);    
}
常量mapStateToProps=（状态）=>({
课程列表：state.course.list
})
常量mapActionToProps={
fetchAllCourses:actions.fetchAll，
deleteCourse:actions.Delete，
createCourse:actions.create，
updateCourse:actions.update，
fetchCourse:actions.fetchById
}
导出默认连接（mapStateToProps、mapActionToProps）（课程）；

---

提前感谢您的帮助。

请参阅此处使用react挂钩+材质ui+您的usePagination自定义挂钩的工作示例：Hi@DannyZ很好。我还在即将上线的项目中实现了挂钩。如果您作为答案提交，我可以接受您的分数。请参阅此处使用react挂钩+材质ui+您的自定义挂钩的工作示例usePagination自定义钩子：Hi@DannyZ很好。我在我的项目中也实现了钩子，很快就会上线。如果你作为答案提交，我可以接受你的分数。