Javascript 仅显示数据中的第一个元素

大家好，我有以下代码：

在这个场景中，我从后端接收一些数据

    const attachments = [
    {
      id: 1,
      name: "someURLL_Name_1",
      link: "https://someURLL_Name_1",
      img: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
    },
    {
      id: 2,
      name: "someURLL_Name_2",
      link: "https://someURLL_Name_2",
      img: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
    },
    {
      id: 3,
      name: "someURL_Name_3",
      link: "https://someURLL_Name_3",
      img: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
    }
     ];

我需要将它们全部映射，只显示数据中的第一个元素，并用数字显示其余隐藏的数据。 最后应该是这样的：

someURL\u Name\u 1https://someURLL_Name_1 +还有2个

我成功地映射了我的所有数据，并为

+more

编写了一些逻辑

    <div className={Styles.attachments}>
      {data.map((item) => {
        return <Attachment key={item.id} data={item} image={item.img} />;
      })}

      {data.length > 1 && (
        <span className={Styles.more}>+{data.length - 1} more</span>
      )}
    </div>

{data.map（（项）=>{
返回；
})}
{data.length>1&&(
+{data.length-1}更多
)}

请帮我解决一个问题。同样，我只想显示第一个元素，然后如果还有其他元素，我应该隐藏它们，并用数字显示隐藏元素

---

谢谢。

那就不要对所有条目进行映射。以下工作将起作用：-

export const Attachments = ({ data }) => {
  return (
    <div className={Styles.attachments}>
      {data[0] && (
        <Attachment key={data[0].id} data={data[0]} image={data[0].img} />
      )}

      {data.length > 1 && (
        <span className={Styles.more}>+{data.length - 1} more</span>
      )}
    </div>
  );
};

export const Attachments=（{data}）=>{
返回(
{数据[0]&&(
)}
{data.length>1&&(
+{data.length-1}更多
)}
);
};