如何匹配对象数组与ID数组的对应值并正确渲染内容到页面

问题根因 #

• 你使用了forEach做外层遍历，forEach本身没有返回值，执行结束后返回undefined，JSX无法渲染undefined内容，所以页面没有输出。
• 嵌套遍历的写法性能较差，数据量较大时会产生不必要的重复遍历开销。

实现方案 #

建议先把分类数据转成ID到名称的映射表，再遍历ID数组渲染匹配项，逻辑更清晰性能也更好：

1. 预构建映射表 #

// 可以放在组件渲染逻辑外或者useMemo里缓存，避免重复生成
const genreMap = new Map(genres.map(item => [item.id, item.name]))

2. 渲染逻辑改写 #

<ul className={`${isHover ? 'block' : 'hidden' } flex space-x-3 text-white font-semibold pb-5`}>
  {
    typeIds
      // 如果需要对重复ID去重，可开启下一行注释
      // .filter((id, index, arr) => arr.indexOf(id) === index)
      .map((id, key) => {
        const name = genreMap.get(id)
        // 仅渲染匹配到的项
        return name ? <li key={key}>{name}</li> : null
      })
  }
</ul>

如果要保留你原有的嵌套逻辑写法，只需要把外层的forEach换成map，同时用flat()打平嵌套返回的数组即可：

<ul className={`${isHover ? 'block' : 'hidden' } flex space-x-3 text-white font-semibold pb-5`}>
  {
    genres.map(element => {
      return typeIds.map((res, key) => {
        if (element.id === res) {
          return <li key={key}>{element.name}</li>
        }
        return null
      })
    }).flat()
  }
</ul>

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