React，在主函数的返回中显示自定义数组

Question

我有一个包含 home.jsx 文件的 React 项目，我在其中创建了一个 JSON 数组：

function Home() {
  const posts = [
    {
      id:1,
      title:"Point Break",
      year:"1992",
      category:["Action","Hold-up","Crime","Surfing","Cult Movie"],
      description:"The film features Reeves as an undercover FBI agent....",
      image: "/movies/1.png"
    },{..}
//etc..

然后在 home 函数的返回中，我像这样渲染该列表：

return (
posts.map(
          post=>(
            <div className="post" key={ post.id}>
              <div className="img">
              </div>
              <div className="content">
                <h1>{post.title}</h1>         
                <p>Category: 
                  {  
                    post.category.map( element =>( element+", "))
                  }</p>                  
                <p>{post.description}</p>                    
              </div>                 
            </div>
))}

当我想用数组渲染类别键时，问题就出现了，单词之间有逗号，但不是最后一个，因为后面没有单词 输出看起来像这样

我想避免图像中的最后一个逗号，但显然我无法在返回中创建任何逻辑。我怎样才能实现这个目标？我需要在 return 之外创建一个函数吗？

我已经尝试过类似的事情：

  const filterCommas = (list,listlength) => {
    var $i=0;
    var renderlist=""
    list.forEach(element => {
      if($i<=listlength-1){
        renderlist += element + ", "
      }
      $i+=1;
    });
    return filteredList;
  }

但是我无法从返回函数中调用它。如何过滤逗号？

Answer 1

好吧，cmgchess 给了我答案：

> post.category.join(", ")

退货内：

所以我会：

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

代替：

<p>
    Category: {  
        post.category.map( element =>( element+", "))
    }
</p>

谢谢你:)。

如果还有其他方法，我很高兴听到，因为有时需要能够用某种逻辑（可能是某个变量或某个循环）过滤某些信息。谢谢