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<Student[]>([]);
    const [pagination, setPagination] = useState<TablePaginationConfig>({/*...*/});

	// 表格分页信息改变时调用
    function paginationChange(newPagination: TablePaginationConfig) {
        setStudents([]);	// 清空 students 即表格的 dataSource
        setPagination(newPagination);	// 更新 pagination
    }

代码007普通

打赏 收藏 海报 链接