封装一个hook对table的查询进行处理

table查询条件分析

• page：查询第几页
• pageSize:每页查询的条数
• 其他查询条件

import { TableSchema } from '@/types/api';
import { useRequest } from 'ahooks';
import { useState } from 'react';
import request from '@/packages/request';
import { message } from 'antd';

interface queryParam {
  page: number;

  [key: string]: unknown;
}

export const useTableData = <T>(url: string) => {
  const [dataSource, setDataSource] = useState<T[]>();
  const [total, setTotal] = useState<number>();
  const [isNext, setIsNext] = useState<Boolean>(false);
  const [param, setParam] = useState<queryParam>({ page: 1 });
  const getAsyncDataSource = async () => {
    try {
      const data = await request<TableSchema<T>>(url, {
        method: 'GET',
        params: { ...param, pageSize: 10 },
      });
      return data;
    } catch (error) {
      throw error;
    }
  };
  const { loading } = useRequest(getAsyncDataSource, {
    manual: false,
    onSuccess: ({ data }) => {
      setDataSource(data.results);
      setTotal(data.count);
      setIsNext(new Boolean(data.next));
    },
    onError: (e: Error) => {
      message.error(e.message);
    },
    refreshDeps: [param],
    loadingDelay: 300,
  });
  const queryByParam = (param: queryParam) => {
    setParam(param);
  };
  return {
    loading,
    isNext,
    total,
    dataSource,
    queryByParam,
  };
};

使用

const Notification = () => {
  const [currentPage, setCurrentPage] = useState<number>(1);
  const { columns } = useNotificationColumns();
  const { dataSource, total, queryByParam } = useTableData<NotificationType>(
    '/notice_message/message/manage',
  );
  useEffect(() => {
    const queryParam = { page: currentPage };
    queryByParam(queryParam);
  }, [currentPage]);

  return (
    <div className={Styles.notification}>

      <Tabs className={Styles.statementTabs}>
        <Tabs.TabPane tab="System notification" key="1">
          <div className="p-6">
            <Table
              columns={columns}
              dataSource={dataSource}
              onChange={(pagination) => {
                setCurrentPage(pagination.current ? pagination.current : 1);
              }}
              pagination={{
                total: total,
                current: currentPage,
                showSizeChanger: true,
                pageSize: 10,
                pageSizeOptions: [10],
              }}
            />
          </div>
        </Tabs.TabPane>

      </Tabs>
    </div>
  );
};