Table 分页请求经过这样封装之后代码可以少很多

[lijunping365]

通过这样一个分页请求钩子函数，可以减少很多重复代码

import { useEffect, useState } from 'react';
import { message, TablePaginationConfig } from 'antd';
import { PageQuery, PageResult } from '@/lib/request';
import { TableParams } from '@/types/typings';

/**
 * antd table 分页请求钩子
 *
 * <p>
 *   @param request 你的数据请求 api
 *   @return [
 *      data：table 数据，
 *      loading： 加载状态，
 *      tableParams：分页参数，
 *      onTableChange：切换分页事件，
 *      fetchData：方便外部主动触发数据加载
 *   ]
 * </p>
 *
 */
const usePaginationRequest = <T>(
  request: (params: PageQuery) => Promise<PageResult<T>>
): [
  T[],
  boolean,
  TableParams,
  (pagination: TablePaginationConfig) => void,
  () => Promise<void>,
] => {
  const [data, setData] = useState<T[]>([]);
  const [loading, setLoading] = useState(false);
  const [tableParams, setTableParams] = useState<TableParams>({
    pagination: {
      current: 1,
      pageSize: 10,
    },
  });

  const fetchData = async () => {
    setLoading(true);
    try {
      const response: PageResult<T> = await request({
        current: tableParams.pagination?.current,
        pageSize: tableParams.pagination?.pageSize,
      });

      setData(response?.records);
      setTableParams({
        ...tableParams,
        pagination: {
          ...tableParams.pagination,
          total: response.total,
        },
      });
    } catch (error) {
      message.error('服务繁忙，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  const onTableChange = (pagination: TablePaginationConfig) => {
    setTableParams({
      pagination,
    });

    // `dataSource` is useless since `pageSize` changed
    if (pagination.pageSize !== tableParams.pagination?.pageSize) {
      setData([]);
    }
  };

  useEffect(() => {
    fetchData().then();
  }, [JSON.stringify(tableParams)]);

  return [data, loading, tableParams, onTableChange, fetchData];
};

export default usePaginationRequest;

使用示例：在分页请求的时候直接使用分页请求钩子函数，这样代码会少很多

const JobTableList: React.FC = () => {  
   
    const request = async (params: PageParams) => {  
        return await fetchDataPage({  
            current: params.current,  
            pageSize: params.pageSize,  
        });  
    };  
  
    const [tableData, loading, tableParams, onTableChange, fetchData] =  
    usePaginationRequest<OpenJob>((params) => request(params));
}

这时，如果你需要在请求时添加其他参数，那就可以像下面这样处理，非常的简单。

const JobTableList: React.FC = () => {  
    const [form] = Form.useForm();  
    
    const request = async (params: PageParams) => {  
        const values = form.getFieldsValue();  
        return await fetchDataPage({  
            ...values,  
            current: params.current,  
            pageSize: params.pageSize,  
        });  
    };  
  
    const [tableData, loading, tableParams, onTableChange, fetchData] =  
    usePaginationRequest<OpenJob>((params) => request(params));
}

完整项目地址：https://github.com/lijunping365/Next-Antd-Template