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

瓦尔丹·哈姆巴祖姆扬（Vardan Hambardzumyan）

大家好，我有以下代码：我的代码

在这种情况下，我将从后端接收一些数据

    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_Name_1 https://someURLL_Name_1 +2 more

我成功映射了所有数据，并为编写了很少的逻辑+ 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>

请帮助我解决问题。同样，我只想显示第一个元素，然后如果还有另一个元素，则应该隐藏它们并显示带有数字的hide元素。

谢谢。

拉克夏·塔库尔（Lakshya Thakur）

只是不要map覆盖所有条目。以下将工作：

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>
  );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。