报错场景:
AntDesign 使用 Pagination 分页组件时,每页条数改变时控制台会发出警告
只发生在较大 pageSize 变为较小 pageSize 时,如从 20条/页 变为 10条/页
完整信息:
Warning: [antd: Table] `dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.
原因:
pageSize 发生改变时,原来的数据即 dataSource 未清除,所以会警告:dataSource 长度大于当前 pageSize
例如,原来 dataSource 有 20 条数据,改变 pageSize 为 10条/页 后,dataSource 依然存在 20 条数据
解决方法:
改变 pagination 之前先清空 dataSource 即可
例如我表中放的是学生信息,表格的 onChange 方法里首先清空学生数据即可
// 表中 dataSource 为 students
const [students, setStudents] = useState<Student[]>([]);
const [pagination, setPagination] = useState<TablePaginationConfig>({/*...*/});
// 表格分页信息改变时调用
function paginationChange(newPagination: TablePaginationConfig) {
setStudents([]); // 清空 students 即表格的 dataSource
setPagination(newPagination); // 更新 pagination
}