Antd Table搜索栏与类型筛选器无法协同工作问题求助

我在Antd Table中实现搜索栏和filterType筛选功能时遇到冲突——取消注释filteredValue配置后，setFilteredType(value)的筛选功能完全失效。

问题原因 #

核心问题是受控状态的逻辑冲突：当手动指定filteredValue后，Table的筛选状态完全由该值主导，但原有代码中搜索和类型筛选的状态没有关联，导致两种规则无法合并生效。

解决方案 #

需要将搜索关键词和类型筛选条件合并处理，确保数据过滤时同时应用两种规则，同时让filteredValue动态关联对应状态：

• 统一维护搜索文本和筛选类型的状态
• 在数据过滤函数中同时校验两个条件
• 让列配置中的filteredValue对应到各自的状态值

修改后的核心代码 #

import { useState } from 'react';
import { Table, Input, Button, SearchOutlined } from 'antd';

const App = () => {
  const [searchText, setSearchText] = useState('');
  const [filteredType, setFilteredType] = useState([]);
  const data = [
    { key: '1', name: 'Test Video', type: 'Video' },
    { key: '2', name: 'Sample Image', type: 'Image' },
    { key: '3', name: 'Readme Text', type: 'Text' },
    { key: '4', name: 'Demo Video', type: 'Video' },
  ];

  // 合并搜索与类型筛选的过滤逻辑
  const filteredData = data.filter(item => {
    const matchesSearch = item.name.toLowerCase().includes(searchText.toLowerCase());
    const matchesType = filteredType.length === 0 || filteredType.includes(item.type);
    return matchesSearch && matchesType;
  });

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="Search name"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ width: 188, marginBottom: 8, display: 'block' }}
          />
          <Button type="primary" onClick={() => confirm()} size="small" style={{ width: 90, marginRight: 8 }}>
            Search
          </Button>
          <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
      filteredValue: [searchText],
      onChange: (pagination, filters) => setSearchText(filters.name?.[0] || ''),
    },
    {
      title: 'Type',
      dataIndex: 'type',
      key: 'type',
      filters: [
        { text: 'Video', value: 'Video' },
        { text: 'Image', value: 'Image' },
        { text: 'Text', value: 'Text' },
      ],
      filteredValue: filteredType,
      onFilter: (value, record) => record.type === value,
      onChange: (pagination, filters) => setFilteredType(filters.type || []),
    },
  ];

  return <Table columns={columns} dataSource={filteredData} />;
};

export default App;

说明 #

• filteredData同时校验搜索文本和类型筛选条件，确保两种筛选协同生效
• 列的filteredValue分别绑定searchText和filteredType状态，保证筛选状态与UI同步
• 移除了原有代码中可能导致状态冲突的硬编码逻辑，让所有筛选状态由React状态统一管理

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