在array.map中渲染元素时删除尾部逗号

问题描述

在下面的代码段中，是否有任何简单的方法可以删除结尾的逗号

const renderElements = () => {
    if (!(data && data.length)) return [];
    return data.map(({ id,name },index) => (
      <p key={id}>{`${name}${
        !(index === data.length - 1) ? "," : ""
      }`}</p>
    ));
}


return (
 <div>
  {renderElements()}
</div>
)

解决方法

您的代码工作正常，那么为什么还要麻烦寻找另一种编写方式？

但是也许您不需要手动插入逗号，只需将其留在CSS中即可：

const renderElements = () => {
    if (!(data && data.length)) return [];
    return data.map(({ id,name }) => (
      <p key={id}>{name}</p>
    ));
}


return (
  <div>
    {renderElements()}
  </div>
);

div p {
  display: inline;
}

div p:not(:last-of-type)::after {
  content: ',';
}

<div>
  <p>Alice</p>
  <p>Bob</p>
  <p>Charlie</p>
  <p>David</p>
</div>