React中嵌套Map函数实现电影轮播图类型标签显示问题

问题描述 #

在React电影搜索应用的轮播图中，需要通过map函数将电影数据的genre_ids（类型ID数组）与类型数据的id匹配，显示对应类型名称，但当前代码返回了所有类型名称，不符合预期。

数据源说明：

• 电影数据：每个条目包含genre_ids字段，为类型ID数组
• 类型数据：每个条目包含id（类型ID）和name（类型名称）字段

错误原因分析 #

原代码存在两个核心问题：

1. 判断条件错误使用赋值运算符=，而非全等比较运算符===，导致每次循环都执行赋值操作，条件永远为真，渲染所有类型
2. e.genre_ids是数组，不能直接与单个数值a.id比较，需用数组方法includes()判断ID是否存在于数组中

修正方案 #

优化写法：先过滤再渲染 #

先筛选出当前电影匹配的类型，再进行map渲染，避免生成无效元素：

{ trend.map((e, i) => {
  // 筛选当前电影对应的类型
  const matchedGenres = genre.filter(genreItem => e.genre_ids.includes(genreItem.id));
  
  return (
    <div className="carousel-item" key={i}>
      <img src={`${img}${e.backdrop_path}`} className="d-block carimage" alt="..." />
      <div className="carousel-caption d-none d-md-block">
        <div className='caro-discription'>
          <button className='trailer-main-button'>More Info!!</button>
          <h1>{e.title?e.title:e.name}</h1>
          <h3>Rating: {e.vote_average}/10</h3>
        </div>
        <div className='genre-list'>
          {matchedGenres.map((a,b) => (
            <h3 className='genre-list-item' key={b}>{a.name}</h3>
          ))}
        </div>
      </div>
    </div>
  )
}) }

简化写法：直接在map中判断 #

如果不想单独过滤，也可以直接在map里添加条件判断：

{ trend.map((e, i) => {
  return (
    <div className="carousel-item" key={i}>
      {/* 其他轮播内容 */}
      <div className='genre-list'>
        {genre.map((a,b) => {
          // 仅渲染匹配的类型
          return e.genre_ids.includes(a.id) ? (
            <h3 className='genre-list-item' key={b}>{a.name}</h3>
          ) : null
        })}
      </div>
    </div>
  )
}) }

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