React应用搜索异常：Department字段匹配housekeeping无结果求助

我正在开发一款React应用，支持对NAME、DEPARTMENT、CAMPUS和JOBTITLE字段进行搜索。目前应用已正常运行，但搜索“housekeeping”时，无法返回DEPARTMENT字段为该值的结果。

相关信息 #

数据（CARDS数据集） #

[
  {
    "ROW_NUMBER": 1,
    "PIDM": 991,
    "NAME": "Elvis Presley",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:nothing-to-see-here@nowhere.edu>test</a>",
    "CAMPUS": "Main 1",
    "DEPARTMENT": "Eng /Read /Frgn Lang/ IDS / Comm.",
    "JOBTITLE": null,
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  },
  {
    "ROW_NUMBER": 2,
    "PIDM": 992,
    "NAME": "James Dean",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:nothing-to-see-here@nowhere.edu>test</a>",
    "CAMPUS": "Main 2",
    "DEPARTMENT": "Instructional Resources",
    "JOBTITLE": "Lead Librarian-Systems",
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  },
  {
    "ROW_NUMBER": 3,
    "PIDM": 993,
    "NAME": "Marilyn Monroe",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:nothing-to-see-here@nowhere.edu>test</a>",
    "CAMPUS": "Main 3",
    "DEPARTMENT": "Housekeeping",
    "JOBTITLE": "Custodian",
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  }
]

过滤逻辑（CAMPUS或JOBTITLE可能为null） #

const onChange = (event) => {

    if (!event.target.value) return setSearchResults(cards);

    const resultsArray = cards.filter((card) => (card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                 card.DEPARTMENT.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                (!card.CAMPUS) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.CAMPUS.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                (!card.JOBTITLE) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.JOBTITLE.toLowerCase().includes(event.target.value.toLowerCase()))
    );


    setSearchResults(resultsArray)

  }

搜索组件 #

<input id='SearchText' type="text" onChange={onChange} className={`form-control ${utilStyles.inputField} ${utilStyles.inputPadding}`} name="SearchText" placeholder="Search Last Name; First Name; Campus; Deparment....." />

核心问题：运算符优先级错误 #

JavaScript中，三元运算符?:的优先级高于逻辑或||，导致你的过滤逻辑执行顺序完全偏离预期。

以第三张卡片（DEPARTMENT为Housekeeping）为例，搜索"housekeeping"时，表达式实际执行逻辑是：

(card.NAME.includes(...) || card.DEPARTMENT.includes(...) || !card.CAMPUS) 
? card.NAME.includes(...) 
: (card.CAMPUS.includes(...) || (!card.JOBTITLE ? card.NAME.includes(...) : card.JOBTITLE.includes(...)))

虽然card.DEPARTMENT.includes(...)返回true，但前面的整体条件为true，会触发三元运算符的card.NAME.includes(...)判断（结果为false），最终整个表达式返回false，导致该卡片被过滤掉。

修正后的代码 #

const onChange = (event) => {
  // 提前转换搜索值，避免重复调用toLowerCase()
  const searchValue = event.target.value.toLowerCase();
  
  if (!searchValue) return setSearchResults(cards);

  const resultsArray = cards.filter((card) => 
    card.NAME.toLowerCase().includes(searchValue) ||
    card.DEPARTMENT.toLowerCase().includes(searchValue) ||
    // 给三元表达式加括号，明确优先级；字段为null时直接返回false（NAME已在前序判断）
    (card.CAMPUS ? card.CAMPUS.toLowerCase().includes(searchValue) : false) ||
    (card.JOBTITLE ? card.JOBTITLE.toLowerCase().includes(searchValue) : false)
  );

  setSearchResults(resultsArray);
};

优化说明 #

1. 提前缓存转换后的搜索值，减少重复计算，提升性能
2. 给每个三元表达式添加括号，强制||按预期顺序执行判断
3. 移除冗余的NAME重复判断，逻辑更简洁清晰

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