如何在JavaScript的map方法内嵌套使用filter方法筛选数组元素

核心原因 #

代码无输出、无渲染的最常见诱因是类型不匹配：itemsArr内的元素为数字类型，而data数组中对象的id为字符串类型，你使用了严格相等运算符===进行判断，类型不同时会直接返回false，导致filter永远返回空数组，后续的map逻辑不会执行。
你提供的无filter版本可以正常运行，正是因为跳过了相等判断，直接遍历了所有data元素。

快速验证&修复 #

你可以在filter逻辑中增加打印确认类型问题：

data.filter((e) => {
  console.log('id类型：', typeof e.id, '匹配值类型：', typeof item, '判等结果：', e.id === item)
  return e.id === item
})

如果确认是类型差异导致的，修改判等逻辑即可：

// 方案1：使用弱相等，自动做类型转换
e.id == item
// 方案2：统一转为数字后严格判等
Number(e.id) === item
// 方案3：统一转为字符串后严格判等
String(e.id) === String(item)

性能优化方案 #

你现在嵌套map+filter的写法时间复杂度为O(n*m)（n为itemsArr长度，m为data长度），data数据量大时性能较差，推荐直接一次性筛选目标数据：

// 先把目标id转为Set，查找复杂度为O(1)
const targetIds = new Set(itemsArr)
// 直接从data中筛选出所有符合条件的记录
const filteredList = data.filter(item => targetIds.has(Number(item.id)))

对应的JSX可以简化为单层遍历，避免产生无效的嵌套空节点：

{
  filteredList.map(item => (
    <div key={item.id}>
      <Link href={`/${item.cat}`}><a>{item.cat}</a></Link>
      <Link href={`/${item.cat}/${item.id}`}><a>{item.name}</a></Link>
      <Link href={`/${item.cat}/${item.id}`}><a></a></Link>
      <img alt={item.name} src={`/images/${item.imgmdh}`}></img>                          
    </div>
  ))
}

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