React中如何基于多个条件实现对象数组的筛选？

原代码核心问题 #

• 未处理筛选条件的默认边界场景：
  1. 性别初始值为空字符串，此时person.gender == gender对所有数据都返回false，直接过滤掉全部人员
  2. 城市多选数组checkedValue为空时，checkedValue.includes(person.city)无匹配项，也会过滤掉全部人员
  3. 预留的search搜索条件未接入筛选逻辑
• filter回调不规范：filter要求回调返回布尔值，你当前返回person/null依赖js隐式类型转换，容易出现隐形逻辑问题
• 链式filter虽然逻辑可行，但多条件下把所有校验合并到单次filter调用中，维护性更高

修复后代码 #

你可以直接替换原有useEffect的逻辑即可：

useEffect(() => {
  const filteredAllPersons = persons.filter(person => {
    // 性别筛选：未选择性别时直接放行
    const genderMatch = gender ? person.gender === gender : true
    // 年龄筛选：默认range为100，正常走判断即可
    const ageMatch = person.age < range
    // 工作类别筛选：选all时直接放行
    const categoryMatch = select === 'all' ? true : person.category === select
    // 城市筛选：未选择任何城市时直接放行
    const cityMatch = checkedValue.length ? checkedValue.includes(person.city) : true
    // 姓名搜索：未输入搜索词时直接放行，忽略大小写匹配
    const searchMatch = search ? person.name.toLowerCase().includes(search.toLowerCase()) : true

    // 所有条件都匹配才返回
    return genderMatch && ageMatch && categoryMatch && cityMatch && searchMatch
  })
  setFilteredPersons(filteredAllPersons)
}, [checkedValue, select, gender, range, search, persons])

逻辑说明 #

每个筛选条件都增加了未激活状态的放行逻辑：当筛选条件为默认空值/全选值时，直接跳过该条件的校验，不会过滤任何数据。只有当用户主动设置了筛选条件后，才会对对应字段做匹配校验，所有条件同时满足的人员才会被保留到结果列表中。

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