reactjs - usePagination 自定义 Hook 与 material-ui 使用分页组件中的 next 和 prev 函数作为 Prop

Question

我使用了自定义 Hook 来使用 material-ui 进行分页。该组件在第一页上工作正常，但调用 next() 、 prev() 和 jump() 不起作用。我已尝试将 next={next} 作为 props 传递。我已经阅读了来自 here 的 api 文档但找不到调用上述函数的正确方法。这是 usePagination.jsx 自定义 Hook 的代码

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，我想在其中显示带分页的类(class)列表。

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);

在此先感谢您的帮助。

Answer 1

您已经创建了一个有状态 Hook ，它提供点击处理程序来管理页面更改。然后将其放入 React 组件中并使用它来驱动 MUI Pagination 组件。

重点是 MUI Pagination 完全配备了自己的点击处理程序，用于管理...页面更改!逻辑已经在里面了，你的工作是不必要的。

为了完整起见，Material-UI 提供了一个开箱即用的 Hook usePagination，它可以完成您想要实现的目标。这个钩子(Hook)的主要用户是... Pagination。

MUI usePagination 允许完全指定分页栏的外观。

有usePagination用法的基本示例for version 5和 for version 4 .

v.5 的源代码是 here .

要完全理解这个钩子(Hook)的逻辑，最好的方法是检查它的 unit tests .