React中三元表达式结合filter匹配值失效问题求助

核心问题：类型不匹配 #

select下拉框的e.target.value是字符串类型（比如选项的value是"0"、"21"），但你代码里用===和数字0、21做比较，字符串和数字的严格相等判断永远为false，导致这两个分支的逻辑根本没触发。

具体表现的原因 #

• 选"--choose an option--"时，因为e.target.value === 0不成立，会走到最后一个分支：item.id <= "0" && item.id > "0"-10。字符串"0"和数字比较时会隐式转成0，条件变成item.id <=0 && item.id > -10，你的数据里id都是正数，所以返回空数组。
• 选"≥21"时，e.target.value ===21不成立，同样走最后一个分支：item.id <= "21" && item.id > "21"-10。"21"-10会转成数字11，条件变成item.id <=21 && item.id>11，自然返回19、16、20、21这些id，不符合你要的≥21的需求。

修复后的代码 #

const Test = () => {
  const data = [
    { date: '2005', id: 27 },
    { date: '2005', id: 27 },
    { date: '2003', id: 3 },
    { date: '2001', id: 19 },
    { date: '2000', id: 4 },
    { date: '2014', id: 30 },
    { date: '2011', id: 16 },
    { date: '2011', id: 10 },
    { date: '2011', id: 20 },
    { date: '2011', id: 21 },
  ];

  const [newId, setNewId] = useState(data);
  // 初始状态设为全部数据，默认显示所有id
  const [filter, setFiltered] = useState(data);

  const handle = (e) => {
    // 把字符串value转成数字
    const selectedValue = Number(e.target.value);
    const aa = newId.filter((item) =>
      selectedValue === 0
        ? true // 返回所有数据，直接return true更简洁
        : selectedValue === 21
        ? item.id >= 21
        : item.id <= selectedValue && item.id > selectedValue - 10
    );
    setFiltered(aa);
    console.log(aa);
  };

  return (
    <div>
      <select id="select" onChange={handle}>
        <option value="0">--choose an option--</option>
        <option value="10">0-10</option>
        <option value="20">11-20</option>
        <option value="21">≥21</option>
      </select>
      {/* 新增展示区域，直观查看过滤结果 */}
      <div className="result">
        {filter.map((item, index) => (
          <span key={index}>{item.id} </span>
        ))}
      </div>
    </div>
  );
};

关键修改点 #

1. 用Number(e.target.value)把字符串类型的value转成数字，确保和数字0、21的严格相等判断生效。
2. 选"--choose an option--"时，直接返回true，这样filter会保留所有数据，比item.id>0更稳妥（兼容可能出现的id=0的情况）。
3. 初始filter状态设为data，默认显示所有数据，符合预期。

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