React中如何基于对象多个属性值实现搜索功能

现有代码的三次过滤操作全部基于原始全量search数组执行，且每次过滤完成后都会直接调用setGame覆盖状态，最终页面生效的只有最后一次按Subject字段过滤的结果，前两次按Topic、Level匹配的结果会被完全覆盖，无法实现多字段联合匹配的搜索效果。

把三次独立过滤合并为单次遍历过滤，在单条数据的匹配判断逻辑里同时校验三个字段，只要任意一个字段命中搜索关键词就保留该条数据，遍历完成后仅调用一次setGame更新最终结果即可。

修复后的完整代码：

<input type="search" placeholder="Search by Topic, Level or Subject..."
  onChange={(e) => {
    // 提前处理搜索关键词：去除首尾空格、统一转小写，减少重复计算
    const keyword = e.target.value.trim().toLowerCase();
    const matchedGames = search.filter(item => {
      // 任意字段匹配即保留当前项
      return (
        item.Topic.toLowerCase().includes(keyword)
        || item.Level.toLowerCase().includes(keyword)
        || item.Subject.toLowerCase().includes(keyword)
      )
    })
    setGame(matchedGames);
  }}
/>

• 对输入的搜索词提前做trim()处理，避免用户误输入首尾空格导致匹配失效
• 搜索关键词仅做一次小写转换存入变量，无需每次校验字段时重复执行小写转换逻辑，减少冗余运算
• Array.filter的回调直接返回布尔值即可，无需通过三元表达式返回item或null，写法更符合JS语法规范

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