分页表格 轮询

1. 设置分页表格相关参数

  // 分页参数
  const [page, setPage] = useState(1); // 当前页
  const [count, setCount] = useState(0); // 数据总数
  const [loading, setLoading] = useState(false); // 请求数据loading
  const [dataSource, setDataSource] = useState<
    {
     id: number; message: string }[]
  >([]); // 数据

2. 使用antd的table组件，并传入相关参数

    <Table
      rowKey="id"
      dataSource={
    dataSource}
      pagination={
    {
    
        current: page,
        total: count,
        pageSize: 8,
        onChange: onPageChange
      }}
      loading={
    loading}
      columns={
    [
        {
    
          title: 'id',
          dataIndex: 'id',
          key: 'id'
        },
        {
    
          title: '信息',
          dataIndex: 'message',
          key: 'message',
          render: (_, record: any) => {
    
            return <>{
    `${
      record.id}-${
      _}`}</>;
          }
        }
      ]}
    />

3. 封装请求方法，设置loadin及相关数据(其中fetchList为fetch请求)

// 封装请求方法，传入所需参数，在请求开始前/请求结束后设置loading
const serviceFn = useCallback(
  (pagination: {
      current?: number; pageSize?: number }) => {
    
    setLoading(true);
    return fetchList({
    
      page: {
    
        to: pagination.current || page,
        size: pagination.pageSize || 8
      }
    })
      .then(data => {
    
        // 设置数据
        setCount(data.dataCount);
        setDataSource(data.data);
      })
      .finally(() => {
    
        setLoading(false);
      });
  },
  [page]
);

4. 使用定时器实现轮询

 // 定时器
 const timer = useRef<number>();

 // 使用定时器实现请求轮询，设置setInterval定时器前需要需要先清除已有的setInterval定时器
  const getList = useCallback(
    (params: {
      current?: number; pageSize?: number }) => {
    
      serviceFn(params);

      // 轮询
      clearInterval(timer.current);
      timer.current = window.setInterval(() => {
    
        serviceFn(params);
      }, 5000);
    },
    [serviceFn]
  );

5. 初始化时发送请求，设置定时器

  // 初始化请求列表，组件写在清除定时器
  useEffect(() => {
    
    getList({
    });

    return () => {
    
      // 清除定时器
      clearInterval(timer.current);
    };
  }, []);

6. 当table切换当前页时会触发onChange事件，定义onPageChange事件

  const onPageChange = useCallback(
    (current: number) => {
    
      getList({
    
        current
      });
      setPage(current);
    },
    [getList]
  );

7. 完整代码

import React, {
     useState, useEffect, useCallback, useRef } from 'react';
import {
     Table } from 'antd';


const App = () => {
    
  // 定时器
  const timer = useRef<number>();
  // 分页参数
  const [page, setPage] = useState(1); // 当前页
  const [count, setCount] = useState(0); // 数据总数
  const [loading, setLoading] = useState(false); // 请求数据loading
  const [dataSource, setDataSource] = useState<
    {
     id: number; message: string }[]
  >([]); // 数据

  // 封装请求方法，传入所需参数，在请求开始前/请求结束后设置loading
  const serviceFn = useCallback(
    (pagination: {
      current?: number; pageSize?: number }) => {
    
      setLoading(true);
      return fetchList({
    
        page: {
    
          to: pagination.current || page,
          size: pagination.pageSize || 8
        }
      })
        .then(data => {
    
          // 设置数据
          setCount(data.dataCount);
          setDataSource(data.data);
        })
        .finally(() => {
    
          setLoading(false);
        });
    },
    [page]
  );

  // 使用定时器实现请求轮询，设置setInterval定时器前需要需要先清除已有的setInterval定时器
  const getList = useCallback(
    (params: {
      current?: number; pageSize?: number }) => {
    
      serviceFn(params);

      // 轮询
      clearInterval(timer.current);
      timer.current = window.setInterval(() => {
    
        serviceFn(params);
      }, 5000);
    },
    [serviceFn]
  );

  // 初始化请求列表，组件写在清除定时器
  useEffect(() => {
    
    getList({
    });

    return () => {
    
      // 清除定时器
      clearInterval(timer.current);
    };
  }, []);

  // 当请求页改变时，重新设置定时器，并设置当前页page
  const onPageChange = useCallback(
    (current: number) => {
    
      getList({
    
        current
      });
      setPage(current);
    },
    [getList]
  );

  return (
    <Table
      rowKey="id"
      dataSource={
    dataSource}
      pagination={
    {
    
        current: page,
        total: count,
        pageSize: 8,
        onChange: onPageChange
      }}
      loading={
    loading}
      columns={
    [
        {
    
          title: 'id',
          dataIndex: 'id',
          key: 'id'
        },
        {
    
          title: '信息',
          dataIndex: 'message',
          key: 'message',
          render: (_, record: any) => {
    
            return <>{
    `${
      record.id}-${
      _}`}</>;
          }
        }
      ]}
    />
  );
};

export default App;