AntDesign 分页警告 [`dataSource` length is less than `pagination.total` but……] 解决方法

本文介绍: 例如，原来 dataSourc e 有 20 条数据，改变 pageSize 为 10条/页后，dataSourc e 依然存在 20 条数据。pageSize 发生改变时，原来的数据即 d a t aSourc e 未清除，所以会警告：da taSourc e 长度大于当前 pageSize。只发生在较大 pageSize 变为较小 pageSize 时，如从 20条/页变为 10条/页。例如我表中放的是学生信息，表格的 onChange 方法里首先清空学生数据即可。

报错场景：

AntDesign 使用 Paginat ion 分页组件时，每页条数改变时控制台会发出警告

只发生在较大 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 发生改变时，原来的数据即 dataSour ce 未清除，所以会警告：dataSour ce 长度大于当前 pageSize

例如，原来 dataSour ce 有 20 条数据，改变 pageSize 为 10条/页后，dataSour ce 依然存在 20 条数据

解决方法：

改变 paginati on 之前先清空 dataSour ce 即可

例如我表中放的是学生信息，表格的 onChange 方法里首先清空学生数据即可

	// 表中 dataSource 为 students
    const [students, setStudents] = useState<Student[]>([]);
    const [pagination, setPagination] = useState<TablePaginationConfig>({/*...*/});

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