英文:
filtering using antD in React JavaScript
问题
I have a table which requires filtering. I am writing as a component class and not a function. When I try to filter the column, it gives me an error saying
Uncaught TypeError: Cannot read properties of undefined (reading 'includes') - using this for filtering on a text..
Idea values are "Choc Flavor" and "Mini Packs" so am trying to create basic filter but when I select the filter, it filters all values and shows me nothing.
render() {
const onChange = (pagination, filters, sorter, extra) => {
console.log('params', pagination, filters, sorter, extra);
};
const columns = [
{
title: 'Stack Rank',
key: 'stackRank',
dataIndex: 'rank',
sorter: (a, b) => a.rank - b.rank,
},
{
title: 'Idea',
dataIndex: 'title',
key: 'idea',
sorter: (a, b) => a.title.length - b.title.length,
filters: [
{
text: 'Mini',
value: 'Mini',
},
{
text: 'Choc Flavor',
value: 'Choc Flavor',
},
],
onFilter: (value, record) => record.title?.includes(value) === 0,
render: (_, record) => (
<Space size="middle">
<Link to={'/idea-detail/' + this.product_id + '/' + record.ideaId}>{record.title}</Link>
</Space>
),
},
{
title: 'Votes',
dataIndex: 'voteCount',
key: 'voteCount',
sorter: (a, b) => a.voteCount - b.voteCount,
onFilter: (value, record) => record.voteCount.includes(value),
sortDirections: ['descend', 'ascend'],
},
];
return (
<Table columns={columns} dataSource={this.state.idea_list} onChange={onChange} pagination={{
}} />
);
}
1: https://i.stack.imgur.com/oy7gD.png
英文:
I have a table which requires filtering. I am writing as a component class and not a function. When I try to filter the column, it gives me an error saying
Uncaught TypeError: Cannot read properties of undefined (reading 'includes') - using this for filtering on a text..
Idea values are "Choc Flavor" and "Mini Packs" so am trying to create basic filter but when I select the filter, it filters all values and shows me nothing.
render() {
const onChange = (pagination, filters, sorter, extra) => {
console.log('params', pagination, filters, sorter, extra);
};
const columns = [
{
title: 'Stack Rank',
key: 'stackRank',
dataIndex: 'rank',
sorter: (a, b) => a.rank - b.rank,
},
{
title: 'Idea',
dataIndex: 'title',
key: 'idea',
sorter: (a, b) => a.title.length - b.title.length,
{
text: 'Mini',
value: 'Mini',
},
{
text: 'Choc Flavor',
value: 'Choc Flavor',
},
],
onFilter: (value, record) => record.title?.includes(value) === 0, render: (_, record) => (
<Space size="middle">
<Link to={'/idea-detail/'+ this.product_id+'/'+record.ideaId} >{record.title}</Link>
</Space>
),
},
{
title: 'Votes',
dataIndex: 'voteCount',
key: 'voteCount',
sorter: (a, b) => a.voteCount - b.voteCount,
onFilter: (value, record) => record.voteCount.includes(value),
sortDirections: ['descend', 'ascend'],
},
];
return (
<Table columns={columns} dataSource={this.state.idea_list} onChange={onChange} pagination={{
}} />
答案1
得分: 1
这可能是因为数组变量 this.state.idea_list 中的一个或多个项目不包含 'idea' 字段或 'idea' 字段未定义。
解决方案是将 onFilter 函数更改为以下形式：
onFilter: (value, record) => record.idea?.includes(value) === 0
英文:
This is probably due to the fact that one or all of the item in the array variable this.state.idea_list do not contain the 'idea' field or it is undefined.
A solution would be to change onFilter function like this:
onFilter: (value, record) => record.idea?.includes(value) === 0
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论