React匹配TMDB genre数组与genre_ids渲染电影类型名问题

你当前的匹配逻辑存在本质错误：通过数组下标对位匹配的前提是两个数组元素顺序完全一致，但TMDB返回的全量类型列表是按固定规则排序的全局数据，单部影片的genre_ids数组只包含该片关联的类型id，二者元素顺序没有任何绑定关系，按下标对位比对必然出现匹配错误、漏匹配的问题。

推荐两种可直接在React+JSX项目中落地的写法：

方案1：预构建ID映射表（性能最优，推荐） #

拿到全量genre数组后先构建id到类型名的映射表，渲染时直接通过id查名称即可，避免每次渲染重复遍历全量数组：

import { useMemo } from 'react'

// 假设全量类型数组存在genres变量中
const genreMap = useMemo(() => {
  const map = new Map()
  genres.forEach(genre => map.set(genre.id, genre.name))
  return map
}, [genres])

// JSX渲染部分
{
  showModal?.genre_ids?.map(genreId => {
    const genreName = genreMap.get(genreId)
    if (!genreName) return null
    return (
      <li 
        key={genreId} 
        className="border-2 2xl:border-4 inline rounded-xl px-2"
      >
        {genreName}
      </li>
    )
  })
}

方案2：遍历查找（适合数据量小的轻量场景） #

如果不想额外构建映射表，可以直接遍历影片的genre_ids，每次从全量类型数组中查找匹配项：

{
  showModal?.genre_ids?.map(genreId => {
    const matchedGenre = genres.find(genre => genre.id === genreId)
    if (!matchedGenre) return null
    return (
      <li 
        key={genreId} 
        className="border-2 2xl:border-4 inline rounded-xl px-2"
      >
        {matchedGenre.name}
      </li>
    )
  })
}

• 渲染列表项必须添加唯一key属性，这里直接用genreId作为key即可，避免React出现渲染异常、状态错乱问题
• 访问嵌套属性时记得加可选链?.做兜底，避免接口数据未返回时读取空值属性抛出JS错误
• 非同源数组不要通过下标对位做匹配，这类写法从逻辑层面无法保证匹配正确性

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