ANTD表getColumnSearchProps被嵌套对象破坏

Question

使用示例中的代码：https://ant.design/components/table/#components-table-demo-custom-filter-panel

getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
  <div style={{ padding: 8 }}>
    <Input
      ref={node => {
        this.searchInput = node;
      }}
      placeholder={`Search ${dataIndex}`}
      value={selectedKeys[0]}
      onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
      onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
      style={{ width: 188, marginBottom: 8, display: 'block' }}
    />
    <Space>
      <Button
        type="primary"
        onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90 }}
      >
        Search
      </Button>
      <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
        Reset
      </Button>
    </Space>
  </div>
),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) =>
  record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
  if (visible) {
    setTimeout(() => this.searchInput.select());
  }
},
render: text =>
  this.state.searchedColumn === dataIndex ? (
    <Highlighter
      highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
      searchWords={[this.state.searchText]}
      autoEscape
      textToHighlight={text.toString()}
    />
  ) : (
    text
  ),
});

尝试在ANTD表中传递嵌套值时抛出错误Uncaught TypeError: Cannot read property 'toString' of undefined：

<Table bordered size='small' dataSource={data} rowKey='_id'>
....
    <Column 
        title='Name' 
        dataIndex={['profile', 'name']}
        {...this.getColumnSearchProps(['profile', 'name'])}
      />
....
</Table>

这里是表的data （（数据源）的结构：

[
    {_id: 'xxx1', profile : { name : 'username1' }, roles: ['xxx1']},
    {_id: 'xxx2', profile : { name : 'username2' }, roles: ['xxx2']}
]

根据文档中概述：https://ant.design/components/table/#Migrate-to-v4：

此外，重大变化是从嵌套字符串更改dataIndex像user.age这样的路径到像['user', 'age']这样的字符串数组路径。这个帮助解决开发人员应该在该领域进行的其他工作包含.。

因此dataIndex={['profile', 'name']}，但与getColumnSearchProps的情况不同。

任何人都可以帮忙吗？

Answer 1

由于dataIndex现在可以是一个数组，因此您也需要注意这种情况。

下面提供一个示例：

您基本上必须

1. Repalce

   record[dataIndex]
   

   with

   get(record, dataIndex) // import get from "lodash.get";
   

2. 和

   this.state.searchedColumn === dataIndex
   

   with

   isequal(this.state.searchedColumn, dataIndex) // import isequal from "lodash.isequal";