如何在React map遍历中为嵌套数组元素添加逗号和空格分隔符

针对你需要在遍历数组后给元素添加逗号空格分隔的需求，有两种常用实现方案： #

方案1：纯文本分隔场景（最简便） #

如果只需要渲染纯文本内容，直接提取所有目标值后使用Array.join()方法拼接即可：

// 单层数组场景
<td>
  {productos.map(item => item.grado).join(', ')}
</td>

// 多层嵌套数组场景（grado本身是数组的情况）
<td>
  {productos.flatMap(item => item.grado).join(', ')}
</td>

join()方法会自动在数组元素之间插入指定的分隔符，且不会在首尾额外添加内容，完全匹配你的需求，无需额外写判断逻辑。 #

方案2：需要给每个值包裹自定义元素的场景 #

如果每个grado值需要用标签（比如<span>、<a>）包裹，就在遍历时判断索引添加分隔符：

<td>
  {productos.map((item, index) => (
    <React.Fragment key={item.id || index}>
      {/* 非第一个元素前加分隔符 */}
      {index > 0 && ', '}
      <span>{item.grado}</span>
    </React.Fragment>
  ))}
</td>

注意事项 #

React遍历列表时需要给每个子项添加唯一的key属性避免运行时警告，优先使用数组子项自带的唯一字段（比如id）作为key，无唯一值时可临时用索引代替。

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