前端 typescript react.js AntDesign 分页 警告 [`dataSource` length is less than `pagination.total` but......] 解决方法

报错场景：

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([]);

const [pagination, setPagination] = useState({/*...*/});

// 表格分页信息改变时调用

function paginationChange(newPagination: TablePaginationConfig) {

setStudents([]); // 清空 students 即表格的 dataSource

setPagination(newPagination); // 更新 pagination

}

精彩链接

 您阅读本篇文章共花了：