ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
90.42k stars 46.4k forks source link

使用Table组件并设置为前端分页和过滤后,点击过滤时,列的render和onFilter函数得到的record对象类型和初始传入的不一致 #48642

Closed louz closed 1 week ago

louz commented 2 weeks ago

Reproduction link

https://github.com/louz/antd-issue

Steps to reproduce

// 用户类定义
export class User {
  id: string;
  name: string;
  gender: 'M' | 'F';

  constructor(args: {
   id: string;
  name: string;
  gender: 'M' | 'F';
  }) {
    this.id = args.id;
    this.name = args.name;
    this.gender = args.gender;
  }

  get genderText(): string {
     return this.gender === 'M' ? '男' : '女';
  }
}

// column配置
const columns = [{
  title: 'id',
  dataIndex: 'id',
  key: 'id'
}, {
  title: 'name',
  dataIndex: 'name',
  key: 'name'
}, {
  title: 'gender',
  dataIndex: 'gender',
  key: 'gender',
  filters: [{
    text: 'M',
    value: '男'
  }, {
    text: 'F',
    value: '女'
  }],
  onFilter: (value, record) => record.gender === value,
  render: (_, record) => {
     console.log({record});
     return record.genderText;
  }
}]

const users: User[] = getUsers();   // 初始化得到一个User数组

// 然后使用table组件进行渲染
<Table rowKey="id" dataSource={users} columns={columns} />
  1. 第一次渲染时,可以正确显示gender列的,gender列的render函数得到的record对象也是User类型的
  2. 但当点击gender列的过滤按钮后,gender列的render函数得到的record对象并不是User类型的,只是一个有id、name、gender字段的普通对象,没有genderText属性或方法,因此也不能正确显示出该列的值

What is expected?

点击gender列的过滤按钮后,gender列的render函数得到的record对象仍是User类型的

What is actually happening?

但当点击gender列的过滤按钮后,gender列的render函数得到的record对象并不是User类型的,只是一个有id、name、gender字段的普通对象,没有genderText属性或方法,因此也不能正确显示出该列的值;

就是说,希望在任何时候获取到的行数据对象,仍然和当初传入dataSource的元素对象类型保持一致

Environment Info
antd 5.16.4
React 18.2
System win10
Browser edge 113
MadCcc commented 1 week ago

需要保证 dataSource 可序列化,内部不会保留 class