React中如何将TMDB API的流派ID转换为对应流派名称？

数据老陈

2026-7-31

如何在React中将TMDB电影流派ID转换为名称字符串？

首先你需要维护一份流派ID与名称对应关系的数组（可以从TMDB官方文档获取完整列表，或基于你提供的示例扩展）：

const genreList = [
  { id: 18, name: "drama" },
  { id: 12, name: "adventure" },
  { id: 53, name: "horror" },
  // 按需添加更多流派
];

为了提升ID查找效率，推荐把数组转换成键值对对象：

const genreMap = genreList.reduce((map, genre) => {
  map[genre.id] = genre.name;
  return map;
}, {});

接下来修改你的ResultUI组件，完成ID到名称的转换：

const ResultUI = ({ film }) => {
  // 定义流派映射（可提取到组件外部复用）
  const genreList = [
    { id: 18, name: "drama" },
    { id: 12, name: "adventure" },
    { id: 53, name: "horror" },
  ];
  const genreMap = genreList.reduce((map, genre) => {
    map[genre.id] = genre.name;
    return map;
  }, {});

  // 将流派ID数组转换为名称数组
  const genreNames = film.genre_ids.map(id => genreMap[id] || "Unknown");

  return (
    <div className="single_result_container">
      <img
        src={`https://www.themoviedb.org/t/p/w1280/${film.poster_path}`}
        alt={film.title || film.name}
      />
      <div className="bio">
        <p className="title">{film.title || film.name}</p>
        <p>{film.overview}</p>
        <p>{film.vote_average}</p>
        {/* 渲染逗号分隔的流派名称 */}
        <p>{genreNames.join(", ")}</p>
      </div>
    </div>
  );
};
export default ResultUI;