React+Ant Design通用表格：搜索/分页变更时重置页码问题修复

问题描述 #

• 搜索关键词变更时，表格未重置至第1页；
• 修改分页条数时，表格未重置至第1页；
• 修改分页条数后序号显示混乱。

核心原因 #

缺少搜索条件/分页条数变更时的页码重置逻辑，且原有useEffect的依赖项与执行顺序未处理到位，导致页码无法同步更新。

解决方案 #

1. 完善useTableData钩子的状态重置逻辑 #

在搜索关键词或分页条数变更时，主动将页码current重置为1，通过监听这两个变量的变化触发重置：

// useTableData.js
import { useState, useEffect } from 'react';

export const useTableData = (fetchData) => {
  const [tableParams, setTableParams] = useState({
    current: 1,
    pageSize: 10,
    keyword: ''
  });
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);

  // 监听关键词或每页条数变化，重置页码
  useEffect(() => {
    setTableParams(prev => ({
      ...prev,
      current: 1
    }));
  }, [tableParams.keyword, tableParams.pageSize]);

  // 发起数据请求
  useEffect(() => {
    const loadData = async () => {
      const result = await fetchData(tableParams);
      setData(result.list);
      setTotal(result.total);
    };
    loadData();
  }, [tableParams, fetchData]);

  // 表格分页、排序、筛选变更处理
  const handleTableChange = (pagination, filters, sorter) => {
    setTableParams(prev => ({
      ...prev,
      current: pagination.current,
      pageSize: pagination.pageSize
    }));
  };

  // 搜索关键词变更处理
  const handleSearch = (keyword) => {
    setTableParams(prev => ({
      ...prev,
      keyword
    }));
  };

  return {
    data,
    total,
    tableParams,
    handleTableChange,
    handleSearch
  };
};

2. 修复序号混乱问题 #

不要直接用数组索引作为序号，而是根据当前页码和每页条数计算正确序号：

// Table组件使用示例
import { Table, Input } from 'antd';
import { useTableData } from './useTableData';

const MyTable = () => {
  const fetchData = async (params) => {
    // 模拟接口请求，返回结构：{ list: [], total: 0 }
    const res = await fetch('/api/table-data', {
      method: 'POST',
      body: JSON.stringify(params)
    });
    return res.json();
  };

  const { data, total, tableParams, handleTableChange, handleSearch } = useTableData(fetchData);

  const columns = [
    {
      title: '序号',
      key: 'index',
      render: (_, __, index) => {
        // 计算全局序号，避免切换页大小混乱
        return (tableParams.current - 1) * tableParams.pageSize + index + 1;
      }
    },
    { title: '名称', dataIndex: 'name', key: 'name' },
    { title: '操作', key: 'action', render: () => <a>编辑</a> }
  ];

  return (
    <div>
      <Input.Search
        placeholder="输入关键词搜索"
        onSearch={handleSearch}
        onChange={(e) => handleSearch(e.target.value)}
        style={{ marginBottom: 16 }}
      />
      <Table
        columns={columns}
        dataSource={data}
        pagination={{
          current: tableParams.current,
          pageSize: tableParams.pageSize,
          total: total,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50']
        }}
        onChange={handleTableChange}
        rowKey="id"
      />
    </div>
  );
};

export default MyTable;

关键说明 #

• 第一个useEffect专门监听keyword和pageSize的变化，确保变更时页码重置为1，触发第一页数据请求；
• 序号计算采用(current-1)*pageSize + index +1的公式，保证切换页大小时序号连续正确；
• 使用函数式更新setTableParams，确保状态基于最新值修改，避免异步更新导致的问题。

内容的提问来源于stack exchange，提问作者user20202116