react-使用ahooks实现分页

usePagination - ahooks 3.0

1.安装

npm install --save ahooks

2.引入

import { usePagination } from 'ahooks';
import { Pagination } from 'antd';

3.分页请求

const getBlogList = useCallback((pagination = {}) => {
  return request.get('/index/blog/list', { params: { page: pagination.current || 1, pageSize: pagination.pageSize || 5 } })
    .then(res => {
      return { total: res.data.data.total, list: res.data.data.items }
    })
}, [])

4.使用usePagination封装请求

(manual: true表示手动触发)

const req = usePagination(getBlogList, { manual: true });
const { pagination, run, data, loading } = req;

5.使用Pagination组件，并传入相关参数

<Pagination
  current={pagination.current}
  pageSize={pagination.pageSize}
  total={data?.total}
  onChange={pagination.onChange}
  onShowSizeChange={pagination.onChange}
  showQuickJumper
  // showSizeChanger
  style={{ marginTop: 16, textAlign: 'right' }}
/>

6.当数据没获取到时显示loading

{
  loading ?
    <p>loading...</p> :
    <ul>
      {
        data?.list?.map(item => <li key={item.id}>{item.name}</li>)
      }
    </ul>
}

7.首次请求

let timer = null
const refreshGetBlogList = useCallback(() => {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    run({
      current: pagination.current,  // pagination.current初始值是1
      pageSize: 5 // pagination.pageSize初始值是10
    })
  }, 300)
}, [req])
useEffect(refreshGetBlogList, [])

7.添加额外请求参数

const refreshGetBlogList = useCallback((categoryId, keyword) => {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    run({
      current: pagination.current,
      pageSize: 5,
      categoryId: categoryId,  //在这里追加的额外参数，会添加到pagination中
      keyword: keyword
    })
  }, 300)
}, [req])

const getBlogList = useCallback((pagination = {}) => {
  return request.get('/index/blog/list',
    {
      params: {
        page: pagination.current || 1,
        pageSize: pagination.pageSize || 5,
        categoryId: pagination.categoryId,
        keyword: pagination.keyword
      }
    })
    .then(res => {
      return { total: res.data.data.total, list: res.data.data.items }
    })
}, [])

8.注意事项

在步骤3中，需要确认读取的返回数据是否正确。如下列代码，我在return { total: res.data.total, list: res.data.items }中没有获取到正确的返回值，导致数据没显示出来，我读取数据的正确路径应该是return { total: res.data.data.total, list: res.data.data.items }

const getBlogList = useCallback((pagination = {}) => {
  return request.get('/index/blog/list', { params: { page: pagination.current || 1, pageSize: pagination.pageSize || 10 } })
    .then(res => {
      return { total: res.data.total, list: res.data.items }
    })
}, [])