Javascript 具有不同组的数组的数据对象，尝试使用.map（）按组类型显示有序数据，并将其推送到新数组，但不呈现任何内容

我正在构建一个React组件，它接受一个数据对象作为道具

此数据对象包含一个组数组，每个组都有自己的组类型

我试图做的是映射数组中的每个组，并将其内容显示为它自己的部分，但我还希望确保所有类型为grid的对象都显示在一起，后面是任何类型为list的部分，无论它们在数组中的位置如何

因此，即使数组包含如下值：

[{Grid}, {List}, {Grid}, {List}, {Grid}]

它将显示如下：

Group #1 (Grid)
    Contents

Group #2 (Grid)
    Contents

Group #3 (Grid)
    Contents

Group #4 (List)
    Contents

Group #5 (List)
    Contents

我遇到的问题是，我编写了两个单独的组件来处理每种类型的样式，然后将它们传递到一个函数中，该函数从原始数组创建一个新数组，然后进行渲染，但没有显示任何内容。我在控制台中没有收到任何错误消息或任何东西，所以我完全不知道我哪里出错了

以下是我的组件、数据结构和：

---

我已经解决了问题

沙箱：

您已经在renderList中循环了

数据

，因此我们可以直接使用

{renderList（data）}

要排序，我们可以使用
Array.sort（）

data.sort（（a，b）=>a.groupType===b.groupType？0:a.groupType>b.groupType？1:-1）

此外，在开关情况下，您需要推动组件，而不是功能

case "grid":
        lists.push(<GridView group={group} />);
        break;

案例“网格”：
lists.push（）；
打破

需要在这里使用解构
constlistview=（{group}）=>{}

最后将
键添加到列表中。我已使用项目名称添加，但您需要根据您的要求进行更改。
太棒了，谢谢！有没有一种方法可以组织这些元素，这样网格就被分组在一起，然后是列表？更新的答案。太棒了，非常感谢！
export default [
  {
    groupName: "Marvel Characters",
    groupType: "grid",
    items: [
      {
        name: "Iron Man",
        subtitle: "Inventor Tony Stark",
        img:
          "https://www.denofgeek.com/wp-content/uploads/2019/02/mcu-1-iron-man.jpg?resize=768%2C432"
      },
      {
        name: "Incredible Hulk",
        subtitle: "Bruce Banner",
        img:
          "https://lh3.googleusercontent.com/proxy/-jHnFcGLqlxjdOl9Mf99UPBk4XJKcQ1Hsv7lPYEs8Vai874sW0l5TUwn3acriwGpE36aUDPpZHPFzccRUt7b7POGOWCFIbgYomTO9bDCXF0eovxFGdr_D3P-0wfLnkUMOOJDG09MgAzqSCbiDq-A"
      }
    ]
  },
  {
    groupName: "Magic Cards",
    groupType: "list",
    items: [
      {
        title: "Kamahl, Fist Of Krosa",
        link:
          "https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=220490"
      },
      {
        title: "Seedborn Muse",
        link:
          "https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=446180"
      }
    ]
  },
  {
    groupName: "DC Characters",
    groupType: "grid",
    items: [
      {
        name: "Batman",
        subtitle: "Bruce Wayne",
        img:
          "https://static.wikia.nocookie.net/marvel_dc/images/a/a6/Batman_Vol_2_2_Variant_Textless.jpg/revision/latest/top-crop/width/360/height/450?cb=20120228075313"
      },
      {
        name: "Martian Manhunter",
        subtitle: "J'onn J'onzz",
        img:
          "https://cdn.flickeringmyth.com/wp-content/uploads/2021/03/Martian-Manhunter-600x338.png"
      }
    ]
  },
  {
    groupName: "Kaiju and Mechs",
    groupType: "grid",
    items: [
      {
        name: "Godzilla",
        img:
          "https://www.denofgeek.com/wp-content/uploads/2019/05/godzillakingofmonsters-2.jpg?resize=768%2C432"
      },
      {
        name: "Hunter Vertigo",
        img: "https://i.ytimg.com/vi/7F-iZYAqSbw/maxresdefault.jpg"
      }
    ]
  },
  {
    groupName: "Comic Books",
    groupType: "list",
    items: [
      {
        title: "Descender",
        link: "https://imagecomics.com/comics/series/descender"
      },
      {
        title: "East of West",
        link: "https://imagecomics.com/comics/series/east-of-west"
      },
      {
        title: "Letter 44",
        link: "https://onipress.com/collections/letter-44"
      }
    ]
  }
];

case "grid":
        lists.push(<GridView group={group} />);
        break;