ReactJS嵌套IF/ELSE语句验证问题（AntD表格范围过滤场景）

问题定位 #

你的嵌套IF/ELSE逻辑本身没有语法错误，执行不触发匹配的核心原因通常是输入值类型和学生字段类型不匹配：

• 从输入框获取的firstInput、secondInput默认是字符串类型，而学生数据里的age/marks/attendance是数字类型，直接进行大小比较会因为隐式类型转换出现不符合预期的结果。
  少数情况下也可能是传入的dataIndex拼写错误（比如大小写不匹配）、输入值为空没有做兼容导致的。

修复方案 #

首先把输入值统一转换为数字类型，同时可以简化冗余的嵌套IF逻辑，你的判断逻辑里dataIndex刚好和学生对象的属性名完全对应，不需要多层判断：

const handleSearch = (firstInput, secondInput, dataIndex) => {
  // 先把输入转为数字，空输入默认设置为边界值适配未填场景
  const min = Number(firstInput) || -Infinity;
  const max = Number(secondInput) || Infinity;
  setSearchStu(
    student.filter((obj) => {
      const targetValue = obj[dataIndex];
      return targetValue >= min && targetValue <= max;
    })
  );
};

如果要保留你原来的嵌套IF写法，只需要补充类型转换即可，同时可以简化冗余的true/false返回：

const handleSearch = (firstInput, secondInput, dataIndex) => {
  // 统一转换为数字类型避免比较异常
  const min = Number(firstInput);
  const max = Number(secondInput);
  setSearchStu(
    student.filter((obj) => {
      if (dataIndex === "age") {
        return obj.age >= min && obj.age <= max;
      } else if (dataIndex === "marks") {
        return obj.marks >= min && obj.marks <= max;
      } else if (dataIndex === "attendance") {
        return obj.attendance >= min && obj.attendance <= max;
      }
      return false;
    })
  );
};

如果修改后仍有问题，可以打印dataIndex、firstInput、secondInput的实际值和类型，排查是否存在传参错误。

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