react项目中通过自定义hook实现前端分页。
适用于一次从接口获取列表全部内容的情况
usePagination.tsx
import React, { useState, useEffect } from 'react';
interface PaginationParams<T> {
// 全部内容的列表
list: T[];
pageSize: number;
}
// 适用于一次从接口获取列表全部内容的情况
// 范型为单个列表项的类型
const usePagination = <T,>(params: PaginationParams<T>) => {
const { list: originList, pageSize } = params;
const list = Array.isArray(originList) ? originList : [];
const total = list.length;
const [visibleList, setVisibleList] = useState<T[]>([]);
const [currentPage, setCurrentPage] = useState<number>(1);
// 入参为切换的新页码
const onChange = (pageNo: number) => {
setCurrentPage(pageNo);
setVisibleList(list.slice((pageNo - 1) * pageSize, pageNo * pageSize));
};
useEffect(() => {
setVisibleList(list.slice((currentPage - 1) * pageSize, currentPage * pageSize));
}, [originList]);
return {
visibleList: visibleList, // 分页后的数据
currentPage: currentPage, //当前页
total: total, //总条数
pageSize: pageSize, // 每页条数
onChange: onChange, // 分页改变后的回调
};
};
export default usePagination;
使用自定义hook
// 1、需先引入自定义hook
// 2、在react顶层使用自定义hook进行分页
const { visibleList, currentPage, total, pageSize, onChange } = usePagination({ list , pageSize: 5 });
运行实例