如何在React的map方法内实现条件渲染，过滤符合要求的列表项

报错原因 #

你在map内加条件报错的核心原因是：JSX的{}内仅支持插入表达式，不支持直接写if这类流程控制语句，同时你当前使用的箭头函数隐式返回（用()包裹返回值）的写法也不支持直接放入语句类逻辑。

实现方案 #

方案1：先过滤再遍历（最推荐）

先通过filter方法筛选出符合条件的商品，再遍历渲染，逻辑拆分清晰，没有多余的无效渲染：

// 示例条件：筛选商品名包含「2024新品」的商品，可按需替换为你的判断逻辑
return (
  <div>
      <div>          
        {products
          .filter(p => p.productName.includes('2024新品'))
          .map(p => (             
            <div key={p.id}> {/* 注意要给遍历元素加唯一key，避免React警告 */}
              <ProductCard productName={p.productName} />
            </div>
          ))}
      </div>    
  </div>
);

方案2：在map内用条件表达式

如果需要在遍历逻辑中做判断，将条件转为表达式写法即可：

写法A：短路与（&&）实现

符合条件才返回组件，不符合条件返回undefined，React会自动忽略该值不会渲染额外内容：

{products.map(p => (             
  p.productName.includes('2024新品') && (
    <div key={p.id}>
      <ProductCard productName={p.productName} />
    </div>
  )
))}

写法B：三元运算符实现

适合不符合条件时需要渲染占位内容的场景，不需要占位就返回null即可：

{products.map(p => (             
  p.productName.includes('2024新品') ? (
    <div key={p.id}>
      <ProductCard productName={p.productName} />
    </div>
  ) : null
))}

注意事项 #

遍历渲染列表元素时，务必给每个遍历的根元素添加唯一的key属性（优先用商品id这类业务唯一值，不要用索引当key），避免React渲染异常和控制台警告。

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