首页 前端知识 AntDesign 分页 警告 [`dataSource` length is less than `pagination.total` but......] 解决方法

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

2024-08-18 22:08:44 前端知识 前端哥 971 788 我要收藏

报错场景:

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
    }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16038.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!