新手使用~React + hooks实现Antd表格的请求携带分页

首先需要声明total(总长度)，分页以及条数

const [tableData, setTableData] = useState<any>(null);//表格数据
const [total, setTotal] = useState(10)
const pageOption = useRef<any>({page: 1,size: 10})

//由于使用setState 会有延迟的情况，所以使用useRef获取实时数据（需要注意的是，useRef不会驱动页面的更新，并且useRef存储的数据需要从current里取哦！），感兴趣的同学可以试试使用useState的效果哦~

声明分页参数

 const paginationProps = {
    total: total, //一定要写，不然会出现只有单页数据的情况
    current: pageOption.current.page,
    pageSize: pageOption.current.size,
    onChange: (current:any, size:any) => paginationChange(current, size) //分页切换的函数 在下面给到
  }

这里是请求数据的接口 初始化的时候默认加载一次

async function onSearch(){
const res =await get('/api',params:{{ ...pageOption.current }}) //简单写，总而言之就是请求的时候要带分页的数据
setTableData(res?.list);
setTotal(res?.total) //要把数据长度赋值给表格的total!重要 没有就会变成单页

// 推荐用dispatch请求接口哦
// dispatch({
//  type:'xx/xx',
//  data:{ ...pageOption.current}
//  })

}

useEffect(()=>{
	onSearch()
},[])

Table以及分页切换的监听函数

<Table
  rowKey={record => record.id}
  dataSource={loading ? [] : tableData}
  columns={columns}
  loading={loading}
  pagination={paginationProps}
  rowClassName={getRowClassName}
 />

// 当前页面切换
 async function paginationChange (page:any, size:any)  {
   pageOption.current = ({ page, size })
   onSearch();
 }

更多api用法请移步Antd官网