React中antd Table开启sorter后onChange无法获取排序参数如何解决

核心原因 #

antd v4 版本 Table 组件的 onChange 回调参数顺序是固定的，你当前的写法误将第二个参数「筛选配置对象filters」当成了排序sorter，所以打印结果为空。

onChange 回调的参数顺序如下：

• 第一位：分页配置对象 pagination
• 第二位：筛选参数对象 filters
• 第三位：排序参数对象 sorter（你需要的排序信息在这个参数里）
• 第四位：额外操作信息对象 extra

修正方案 #

调整onChangeTable的参数接收顺序即可，修正后的代码如下：

const onChangeTable = (pagination, filters, sorter) => {
    console.log(sorter) // 点击排序列后可正常获取到field、order等排序信息
}

可选补充排查点 #

如果调整参数后仍有异常，可检查以下配置：

• 确认所有排序列的dataIndex没有重复值，排序逻辑依赖dataIndex匹配对应列
• 如果是前端本地排序，可给sorter传入自定义比较函数，示例：sorter: (a, b) => a.id - b.id，不影响服务端排序逻辑的使用

内容的提问来源于stack exchange，提问作者Viet