ant-design / ant-design/pro-components

🧐[问题]ProTable request和pagination.onChange会重复请求

Open
#7,423 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🧐 问题描述

我想在ProTable中进行排序
onChangeSort会将sorter塞到state.queryCondition 并请求接口
onChangePage会更新state.queryCondition中的current pageSize 并请求接口

```
pagination={{
showSizeChanger: true,
current: state.queryCondition.current,
pageSize: state.queryCondition.pageSize,
total: state.tableDatas.total,
showTotal: (total) => `共 ${total} 条记录`,
onChange: onChangePage,
}}
request={onChangeSort}
```
场景1:
如果我点击过排序 且当前 current = 1 时
再点击第二页会先调用onChangePage 设置 current = 2
更新后又调用了一次onChangeSort 此时 current = 2
共请求两次

场景2:
如果我点击过排序 且当前 current = 1 时
再点击第二页会先调用onChangePage 设置 current = 2
更新后又调用了一次onChangeSort 此时 我想在onChangeSort中设置current = 1 回到第一页 此时current = 1
再次触发onChangePage 此时 current = 1
再次触发onChangeSort 此时 current = 1
共请求四次

### 尝试解决

1. 去掉onChange -> onChangePage 点击分页无反应
2. onChangePage中不再请求,只更新current pageSize -> 正常触发onChangeSort 只请求一次 但不能在排序时设置current = 1 回到第一页
3. 注释掉pagination 使用组件绑定onChangePage 解决

### 🚑 其他信息

版本更新前pagination.onChange 和 request 并不会互相影响
Table中的排序和筛选是使用onChange实现的,并指定了触发类型action

参数 | 说明 | 类型 | 默认值 | 版本
-- | -- | -- | -- | --
onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: paginate \| sort \| filter }) | -

ProTable中pagination.onChange和request是否有些冲突,以及希望request中可以指定当前触发类型

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the two reported ProTable scenarios with pagination.onChange and request: changing pages after sorting, and resetting to page 1 during sorting. Trace how pagination, sorting, and request updates trigger one another; done means each interaction makes only the intended request while sorting can still reset the page.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.