Ant Design Table数据源变更时强制跳转至第一页的实现问题

问题根因 #

你当前使用的是受控分页模式，主动给pagination属性传入了current绑定自定义状态，此时defaultCurrent仅在组件首次渲染时生效，后续dataSource更新不会自动触发页码重置，因此会停留在上一次访问的页码。

具体修改方案 #

1. 给页码状态设置初始默认值 #

将currentPage的初始值设为1，保证组件首次加载时默认停在第一页。

2. 监听数据源变更，触发页码重置 #

新增useEffect监听tableData的变化，只要数据源更新就主动把页码重置为1。

修改后的完整代码如下：

import { useState, useEffect, Fragment } from 'react';
import { Table } from 'antd';

const TableContent = ({ tableData, title }) => {
  // 给页码设置初始值1
  const [currentPage, setCurrentPage] = useState(1)

  const columns = [
      'stuff'
  ]

  // 新增监听：tableData变更时重置页码为1
  useEffect(() => {
    setCurrentPage(1)
  }, [tableData])

  return (
      <Fragment>
          <Table
              columns={columns}
              dataSource={tableData}
              rowKey={"_id"}
              style={{ padding: '0 50px' }}
              size="small"
              pagination={{
                  defaultPageSize: 7, 
                  onChange: pageNum => {
                      setCurrentPage(pageNum)
                  },
                  current: currentPage
              }}
          />
      </Fragment>
  )
}

注意事项 #

如果你的tableData是引用类型（数组/对象），需要保证每次数据源更新时传入的是新的引用（比如接口返回新数组、更新时通过展开运算符生成新数组等），否则useEffect不会触发监听逻辑。

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