ANTD Table getColumnSearchProps 被嵌套对象破坏答案

【问题标题】：ANTD Table getColumnSearchProps broken with nested objectANTD Table getColumnSearchProps 被嵌套对象破坏
【发布时间】：2020-08-26 03:21:00
【问题描述】：

使用示例中的代码：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(dataSource) 的表结构：

[
    {_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 的情况不同。

有人可以帮忙吗？

【问题讨论】：

标签： javascript reactjs meteor antd

【解决方案1】：

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

下面是一个例子：

你基本上必须

替换

record[dataIndex]

与

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

和

this.state.searchedColumn === dataIndex

与

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

【讨论】：