React中用三元运算符实现Antd表格仅年龄字段范围过滤如何操作？

核心问题说明 #

你现有代码的逻辑存在本质缺陷：handleSearch 没有接收「当前触发筛选的列」的标识，所以filter逻辑会同时校验三个列的数值，只要任意一列符合输入范围就会返回匹配，自然会出现筛年龄同时带出分数、出勤率匹配结果的问题。
你写的(true, xxxxxxxxxxxx)属于对逗号运算符的误用，JavaScript中逗号运算符会返回最后一个表达式的返回值，所以你写(true, 任意值)最终返回的是后面的任意值，自然不符合预期，且你尝试的(obj.attendance: false)是完全不符合语法的写法，自然会报错。

方案1（最优推荐）：新增筛选列标识参数 #

修改handleSearch新增filterColumn入参，用来标记当前是对哪一列做筛选，筛选时只校验该列的数值即可，代码可读性和可维护性都更高：

// 新增filterColumn参数，传入对应列的dataIndex，比如 'age'/'marks'/'attendance'
const handleSearch = (firstInput, secondInput, filterColumn) => {
  setSearchStu(
    student.filter((obj) => {
      const currentValue = obj[filterColumn];
      return currentValue >= firstInput && currentValue <= secondInput;
    })
  );
};

同时修改Antd Table列配置中filterDropdown的确认逻辑，调用时传入当前列的标识：

const columns = [
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    filterDropdown: ({ confirm }) => (
      // 你的范围输入组件，确认时传入当前列的dataIndex
      <button onClick={() => {
        const min = 输入的最小值
        const max = 输入的最大值
        handleSearch(min, max, 'age');
        confirm();
      }}>确定筛选</button>
    )
  },
  // 分数、出勤率列配置同理，调用handleSearch时分别传入 'marks' 和 'attendance' 即可
]

方案2（不推荐，仅适配你现有写法）：直接返回true #

如果你非要沿用当前嵌套三元的写法，直接把(true, xxxxxxxxxxxx)替换成true即可：

const handleSearch = (firstInput, secondInput) => {
  setSearchStu(
    student.filter((obj) => {
      return obj.age >= firstInput && obj.age <= secondInput
        ? true
        : obj.marks >= firstInput && obj.marks <= secondInput
        ? true
        : obj.attendance >= firstInput && obj.attendance <= secondInput
        ? true
        : false;
    })
  );
};

注意：该方案仍然存在逻辑缺陷：当你筛选分数或出勤率时，只要某条数据的年龄刚好也在输入的范围内，就会优先匹配年龄条件返回结果，无法实现「仅匹配目标筛选列」的需求，仅适合临时调试使用。

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