React Native FlatList如何实现搜索与分类的组合联动过滤

现有实现的核心问题 #

当前的过滤逻辑为互斥二选一的三元判断结构：

• 只要检测到存在搜索输入文本，就仅执行名称关键词匹配逻辑，完全跳过分类选择器的过滤规则
• 只有当搜索输入为空时，才会执行分类匹配的过滤逻辑
• 两种过滤规则无法同时生效，无法实现多条件叠加筛选的目标：比如选中massage分类后，输入John应返回空结果、输入j应展示Jason条目的预期效果完全无法达成

调整方案 #

核心逻辑是把互斥的二选一分支，修改为串联的逻辑与关系：对全量原始业务数据，依次校验每一层过滤规则，只有同时满足所有规则的条目，才会被保留为最终的列表数据源。
具体调整步骤：

• 移除原有三元判断里的分支选择逻辑，不再在“搜索过滤”和“分类过滤”之间做二选一
• 对全量原始数据先执行分类维度初筛：若当前选中分类不是all，直接过滤掉分类不匹配的条目
• 在初筛结果基础上，再执行搜索关键词匹配：将条目文本与搜索文本统一转小写、去除搜索文本首尾空格后做包含匹配，过滤掉关键词不匹配的条目
• 将两层过滤后的最终结果，绑定为FlatList的data属性即可

参考实现代码 #

// 基于预置的原始全量数据生成过滤结果
const filteredData = rawBusinessData.filter(item => {
  // 校验是否匹配选中分类
  const categoryMatch = filter === 'all' || item.category === filter;
  // 校验是否匹配搜索关键词
  const searchMatch = item.name.toLowerCase().includes(searchText.trim().toLowerCase());
  // 两个条件同时满足才保留该条目
  return categoryMatch && searchMatch;
});

效果校验 #

按照上述逻辑调整后，对应预期场景的运行结果：

• 选中massage分类、输入John：先经过分类初筛排除所有非massage类条目，剩余条目中无名称包含John的内容，最终返回空列表
• 选中massage分类、输入j：分类初筛后保留所有massage类条目，再经过关键词匹配保留名称带j的Jason条目，其他不含j的massage类条目被筛除

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