React Hooks 实现分页组件

使用 React Hooks, Ts 实现一个分页组件

分页组件

import {useState } from 'react'
function useTableData<S, T>(fetchFun: Function){
	const [tableData, setTableData] = useState<T[]>([])
	const [tableTotal, setTableTotal] = useState<number>(0)
	const [loading, setLoading] = useState<boolean>(false)
	async function getData(condition: S) {
		setLoading(true)
		let {data, totalCount} = await fetchFun(condition)
		setLoading(false)
		setTableData(data)
		setTableTotal(totalCount)
	}
	return {loading, tableData, tableTotal, getData}
}
export default useTableData

调用方式

const {tableData: dataSource, loading, tableTotal, getData} = useTableData<IDownloadRequest, IDownloadResponse[]>(getAppDownloadInfo)
useEffect(() => {
        getData({...query})
}, [])

如果更好方法，欢迎大家指出评论！