React中filter()结合if/else实现多条件筛选不生效问题排查

你的判断逻辑存在本质错误：if/else if 是互斥分支结构，同一时间只会执行第一个命中条件的分支，后续分支完全不会运行：

• 搜索框为空时，直接进入第一个分支返回所有产品，分类筛选逻辑根本不会执行
• 搜索框有输入时，只要产品标题匹配搜索词就直接进入第二个分支返回，不会校验分类是否符合选中要求
• 只有产品标题完全不匹配搜索词的时候，才会走到后面的分类判断分支，这就是两个功能无法同时生效的核心原因。

另外你原有代码里filter回调直接返回product对象的写法也不规范，filter需要返回布尔值来决定元素是否保留，虽然JS里对象是truthy值不会报错，但不符合语义要求。

不要用互斥分支串联筛选条件，把每个筛选规则拆成独立的布尔判断，最终返回「所有当前启用的条件都满足」的结果即可，后续要加的价格排序逻辑也可以顺着这个结构轻松扩展。
修复后的核心代码如下：

products?.filter((product) => {
  // 标题搜索匹配判断
  const isMatchSearch = searchedInput === "" 
    ? true 
    : product.title.toLocaleLowerCase().includes(searchedInput.toLocaleLowerCase())

  // 分类筛选匹配判断
  let isMatchCategory = true
  const hasSelectedCategory = categorySelected.electronics || categorySelected.jewelery
  if (hasSelectedCategory) {
    isMatchCategory = 
      (categorySelected.electronics && product.category === Category.Electronics)
      || (categorySelected.jewelery && product.category === Category.Jewelery)
  }

  // 所有生效条件同时匹配才保留当前产品
  return isMatchSearch && isMatchCategory
})
// 价格排序逻辑在filter之后链式调用sort即可，不要把排序逻辑写在filter里
.sort((a, b) => {
  // 示例：按价格升序排列，可根据你的排序切换需求调整为降序/其他规则
  return a.price - b.price
})
.map((product) => {
  return (
    <ProductCard /* 保留你原有传递的组件属性即可 */ />
  )
})

• 每个筛选条件独立计算匹配结果，互不干扰
• 搜索框为空时，搜索条件默认放行，不会阻断分类筛选
• 未选中任何分类时，分类条件默认放行，不会阻断搜索功能
• 多个条件同时启用时，必须全部匹配才会返回对应产品，符合常规筛选交互预期

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