JS/React如何实现支持同属性多选值的多属性列表筛选功能

• 原代码默认filters的每个属性为单个值，多选场景下filters的对应属性应为选中值组成的数组，直接用==判断无法匹配数组与单个值，导致全部条目被过滤，返回空数组
• 原代码中filters !== {}的判断逻辑无效，对象为引用类型，直接比较永远返回true，无法正确判断filters是否为空

你可以选择保留原有filters单值结构，或调整为数组结构存储多选值，修改后的筛选逻辑兼容两种场景：

allRequests.filter((item) => {
  // 正确判断filters是否为空
  if (Object.keys(filters).length === 0) return true
  // 遍历所有筛选字段
  for (const key in filters) {
    // 兼容单值/数组两种筛选值格式，统一转为数组处理
    const filterValues = Array.isArray(filters[key]) ? filters[key] : [filters[key]]
    // 该字段无有效筛选值直接跳过
    if (filterValues.length === 0) continue
    // 条目对应字段值不在选中值列表中，直接过滤
    if (!filterValues.includes(item[key])) {
      return false
    }
  }
  // 所有筛选条件都匹配
  return true
})

多选场景下推荐filters采用数组结构存储选中值，示例如下：

// 同时筛选status为WAITING/IN_PROGRESS、priority为HIGH的场景
const filters = {
  status: ['WAITING', 'IN_PROGRESS'],
  priority: ['HIGH']
}

用上述示例filters测试你提供的示例数据，会返回id为1、2的两条符合要求的条目，满足多选筛选需求。

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