如何基于另一个数组的取值，过滤对象数组中stack字段匹配的元素

问题根因 #

你现有代码的问题是：传入的value是关键词数组，但你直接把整个数组传给了includes()方法，相当于判断单个技术栈标题是否包含整个数组，逻辑完全不匹配，才导致结果不符合预期。

修复后代码（精确匹配） #

如果要求技术栈标题和关键词完全匹配（比如react只能匹配React，不能匹配React Native），使用以下代码：

const filter = (keywords) => {
  // 统一把过滤关键词转为小写，规避大小写匹配问题
  const lowerKeywords = keywords.map(item => item.toLowerCase())
  const newProj = relProjects.filter(project =>
    // 只要项目技术栈中存在任意一个匹配的关键词，就保留该项目
    project.stack.some(stackItem => lowerKeywords.includes(stackItem.title.toLowerCase()))
  )
  setProjRel(newProj)
  return newProj
}

// 调用示例
console.log(filter(["react","prestashop"]))

可选：模糊匹配版本 #

如果需要支持模糊匹配（比如react可以匹配到React Native这类包含关键词的技术栈），修改some内的判断逻辑即可：

const filter = (keywords) => {
  const lowerKeywords = keywords.map(item => item.toLowerCase())
  const newProj = relProjects.filter(project =>
    project.stack.some(stackItem => {
      const stackTitleLower = stackItem.title.toLowerCase()
      // 只要存在任意一个关键词是当前技术栈标题的子串，就匹配成功
      return lowerKeywords.some(key => stackTitleLower.includes(key))
    })
  )
  setProjRel(newProj)
  return newProj
}

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