React中如何过滤对象数组数据？现有标签搜索逻辑存在问题

原代码的问题 #

• 标题/描述过滤逻辑失效：仅调用toLowerCase()但未检查是否包含搜索关键词，导致无论搜索什么都会返回true，完全起不到过滤作用
• 标签搜索逻辑错误：
  • 使用map转小写后调用includes(searchTerm)，是判断整个标签数组是否存在与搜索词完全相等的元素，而非判断某个标签是否包含搜索词（单个字符或子串）
  • 未将搜索词转小写，存在大小写不匹配的问题

修正后的过滤代码 #

const filterData = trips.filter(item => {
  // 搜索词为空（含纯空格）时返回所有数据
  if (!searchTerm.trim()) return true;
  
  // 统一转小写，消除大小写敏感问题
  const lowerSearch = searchTerm.toLowerCase();
  
  // 检查标题是否包含搜索词
  const matchesTitle = item.title.toLowerCase().includes(lowerSearch);
  // 检查描述是否包含搜索词
  const matchesDescription = item.description.toLowerCase().includes(lowerSearch);
  // 检查标签数组中是否有任意标签包含搜索词（支持单个字符、子串匹配）
  const matchesTags = item.tags.some(tag => tag.toLowerCase().includes(lowerSearch));
  
  // 满足任一条件则保留该条目
  return matchesTitle || matchesDescription || matchesTags;
});

核心优化说明 #

• 统一大小写处理：所有参与比较的字符串都转为小写，彻底避免因大小写差异导致的匹配失败
• 正确的包含判断：使用includes()方法检查目标字符串是否包含搜索词，支持单个字符、子串的匹配
• 标签数组高效匹配：用some()遍历标签数组，只要有一个标签符合条件就返回true，性能更优且逻辑准确
• 空搜索词处理：通过trim()过滤纯空格的搜索词，避免无效过滤

内容的提问来源于stack exchange，提问作者nien-ying hung