标签：current const 自定义 res react paginationParam useState antd data

useTable: 

import React, { useState, useEffect } from 'react';
import axios from '@common/js/axios';
import qs from 'qs'

let searchData = {}
function useTable(url, ajaxData = {}) {
  const [dataList, setDataList] = useState([]);
  const [resData, setResData] = useState([]);
  const [pagination, setPag] = useState({
    pageSize: ajaxData.pageSize || 15,
    current: 1,
    showQuickJumper: true,
    showSizeChanger: false,
    showTotal: (total) => (
      <span>
        共<span className="text-warning">{total}</span>条
      </span>
    ),
    onChange: (current = 1) => {
      setPagination({current})
    }
  });
  const [loading, setLoading] = useState(false);
  const [responseData, setResponseData] = useState({})

  const getList  = function({searchParam, paginationParam={}, config = {}}={}){
    setLoading(true);
    let isSearch = typeof searchParam === 'object'
    let isCurrent = typeof paginationParam.current !== 'undefined'
    let param = isSearch ? searchParam : searchData

    if (isSearch) {
      searchData = searchParam;
    }

    axios
      .post(config?.url ? config.url : url, qs.stringify({
        pageSize: 15,
        curPage: isCurrent ? paginationParam.current - 1 :  pagination.current - 1,
        ...ajaxData,
        ...param,
      }))
      .then((res) => {
        if (res.flag === 1) {
          setDataList(res.data.dataList);
          setResData(res.data);
          setPag({
            ...pagination,
            current: res.data.curPage + 1,
            total: res.data.totalRows
          });
          setLoading(false);
          setResponseData(res.data);
        }
      });
  }
  useEffect(() => {
    getList()
  }, []);

  const setSearchData = function(searchParam, paginationParam, config){
    getList({searchParam, paginationParam, config})
  }
  const setPagination = function(paginationParam){
    getList({paginationParam})
  }
  return {
    dataList,
    resData,
    setDataList,
    pagination,
    loading,
    setLoading,
    searchData,
    setSearchData,
    responseData,
  };
}

export default useTable;

使用：

  // 调用
  const { dataList, loading, pagination, searchData, setSearchData } = useTable(
    '/list.json',
    {}
  )

  // 搜索
  const handleSearch = (data) => {
    setSearchData(data, {current: 1})
  }

  // 重置
  const handleClear = () => {
    form.resetFields()
    setSearchData({}, {current: 1})
  }

  return (
    <>
        <Table
          loading={loading}
          columns={columns}
          dataSource={dataList}
          rowKey="id"
          pagination={pagination}
        />
        {/* 新增客户 */}
        {
          addCustomerVisible &&
          <AddCustomer
            visible={addCustomerVisible}
            onOk={() => {
              setAddCustomerVisible(false)
              setSearchData({}, {current: 1})
            }}
            onCancel={() => { setAddCustomerVisible(false) }}
          />
        }
      </>
  )

标签：current,const,自定义,res,react,paginationParam,useState,antd,data
来源： https://blog.csdn.net/qq_41887214/article/details/114100825

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。