React Redux TypeScript中实现名称与日期双维度搜索过滤

你现有代码的核心问题是把所有筛选值都存在同一个searchTerm状态里，没有给名称筛选预留独立的状态存储，按以下步骤改造即可：

1. 拆分独立筛选状态 #

不要把不同维度的筛选值混存在同一个state里，拆成两个独立状态分别存储日期范围、名称关键词，TypeScript类型直接对应标注：

// 存储日期范围筛选值
const [dateRange, setDateRange] = useState<string[]>([]);
// 存储名称搜索关键词
const [nameKeyword, setNameKeyword] = useState<string>('');

2. 新增名称筛选输入组件 #

在原有日期选择器的同级位置，添加Antd的Input输入框作为名称筛选入口，和RangePicker一起放在Space容器里：

<Space direction="vertical" size={12} style={{ marginBottom: 16 }}>
  {/* 名称搜索输入框 */}
  <Input
    placeholder="输入名称搜索"
    allowClear
    onChange={(e) => setNameKeyword(e.target.value.trim())}
  />
  {/* 原有日期范围选择器，绑定到拆分后的日期状态 */}
  <RangePicker 
    onChange={(dates, datesString) => setDateRange(datesString)}
  />
</Space>

3. 改造Table数据过滤逻辑 #

过滤规则调整为同时满足两个筛选条件才保留数据，单个筛选条件为空时自动跳过对应判断，注意Array.filter的回调要返回布尔值，不要直接返回数据项：

<Table 
  className='tablica' 
  columns={columns} 
  dataSource={todoHistory.filter((val) => {
    // 日期维度判断
    let isDateMatch = true;
    if (dateRange.length === 2 && dateRange[0] && dateRange[1]) {
      isDateMatch = moment(val.datum).diff(dateRange[0]) >= 0 && 
                    moment(val.datum).diff(dateRange[1]) <= 0;
    }

    // 名称维度判断：把val.name替换成你实际数据里的名称字段即可
    let isNameMatch = true;
    if (nameKeyword) {
      // 这里是不区分大小写的模糊匹配，需要精确匹配直接改成 val.name === nameKeyword
      isNameMatch = val.name.toLowerCase().includes(nameKeyword.toLowerCase());
    }

    return isDateMatch && isNameMatch;
  })} 
/>

适配说明 #

• 如果你的数据里名称字段不是name，把过滤逻辑里的val.name替换成实际字段名，比如val.title、val.todoName都可以。
• 后续要接入Redux管理筛选状态时，只需要把两个本地useState替换成Redux中存储的全局状态，通过action更新值即可，过滤逻辑不需要修改。
• 筛选框清空、未选择日期/未输入名称时，对应筛选条件会自动失效，不会强制过滤数据。

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