如何在单个filter方法中实现数组多选项/多字符串的筛选功能

问题根因 #

你的代码存在两个核心问题：

1. String.prototype.includes() 仅支持传入单个字符串参数，你传入optionSelected.map(item => item.value)得到的是数组，JS会自动将数组转为逗号拼接的字符串，仅选中单个选项时刚好匹配，多选后拼接字符串和单个liveStatus无法对应，导致筛选失效。
2. 多选场景下未选中任何选项时，optionSelected是空数组而非空字符串，原有optionSelected === ''的判断逻辑不生效。

修正后代码 #

const displayBulletins = bulletins
  .filter((bulletin) => {
    // 未选中任何选项时返回所有公告
    if (optionSelected.length === 0) return true
    // 提取所有选中的状态值，统一转小写避免大小写匹配问题
    const selectedValues = optionSelected.map(item => item.value.toLowerCase())
    // 判断当前公告的状态是否在选中的状态列表中
    return selectedValues.includes(bulletin.liveStatus.toLowerCase())
  })

const handleChange = selected => {
  setOptionSelected(selected)
}

逻辑说明 #

提前将所有选中的状态值统一转为小写存入数组，筛选时直接判断当前公告的直播状态是否在选中数组内即可，可支持任意数量选项的多选筛选需求，单个、多个、全选场景都能正常生效。

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