React项目渲染分类数组时如何去除末尾多余逗号？

给你几个简单实用的解决办法：

方法一：用数组join()方法（最推荐） #

直接利用JavaScript数组自带的join()方法，把数组元素用指定分隔符连接成字符串，自动避免末尾逗号：

<p>Category: {post.category.join(', ')}</p>

这个方法最简洁，完全不用手动处理循环和逗号逻辑，React会直接渲染处理好的字符串。

方法二：map时判断是否为最后一个元素（适合需要给分类项加样式/标签的场景） #

如果要给每个分类项单独包裹标签或添加样式，可以在map遍历的时候，通过索引判断当前元素是不是最后一个，只在非最后一项后面加逗号：

<p>Category: 
  {post.category.map((element, index) => (
    <span key={index} className="category-tag">
      {element}
      {index !== post.category.length - 1 ? ', ' : ''}
    </span>
  ))}
</p>

注意：这里用index作为key仅适用于分类项不会新增、删除或排序的场景，如果分类项有动态变化，建议给每个分类项设置唯一ID作为key。

修正你自己写的filterCommas函数 #

你写的函数有两个问题：变量名不匹配、判断条件错误，修正后可以正常使用：

const filterCommas = (list) => {
  let renderlist = "";
  list.forEach((element, index) => {
    renderlist += element;
    // 只有非最后一个元素才加逗号
    if (index < list.length - 1) {
      renderlist += ", ";
    }
  });
  return renderlist;
}

调用方式：

<p>Category: {filterCommas(post.category)}</p>

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