usePage

最新推荐文章于 2024-07-20 23:54:17 发布

FØund404

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量73

点赞数

分类专栏： React 文章标签： javascript 前端 react.js typescript

本文链接：https://blog.csdn.net/bl_ack233/article/details/130158364

版权

React 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该文章展示了如何在React应用中使用自定义Hook`usePage`来处理分页逻辑。`usePage`Hook包含了`useState`和`useEffect`，用于管理分页数据、查询数据以及页面大小。它还监听分页变化并调用`queryClick`回调函数更新数据。同时，Hook还从sessionStorage中获取路径地址。

摘要由CSDN通过智能技术生成

usePage

import { useState, useEffect } from "react";

export interface pageDatatype {
  total?: number;
  totalPage?: number;
  currentPage: number;
  pageSize: number;
}

const usePage = (queryClick) => {
  const [queryData, setQueryData] = useState({});
  const [pageData, setPageData] = useState<pageDatatype>({
    //分页数据
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });
  const [tableList, setTableList] = useState([]); //table数据
  const [router, setRouter] = useState([]);

  useEffect(() => {
    let routerData = sessionStorage.getItem("breadcrumbList")
      ? JSON.parse(sessionStorage.getItem("breadcrumbList") || "")
      : []; // 获取存放在会话储存中的路径地址
    setRouter(routerData);
  }, []);

  const pageChange = (currentPage: number, pageSize: number) => {
    let pageData = {
      currentPage,
      pageSize,
    };
    queryClick(queryData, pageData);
  };
  return {
    router,
    pageChange,
    queryData,
    setQueryData,
    pageData,
    setTableList,
    tableList,
    setPageData,
  };
};

export default usePage;