Reactjs 如何.映射在React中分组为类别的项目的呈现列表

大家好，我想使用

.map

将一些项目渲染到它们自己的类别中，但我不知道如何操作。我只知道如何呈现标准列表。以下是我的数据示例：

[
       {
        "id_kategoriTest": 1,
        "kategori": "Hematologi",
        "id_jenisTest": 24,
        "jenis": "Coombs Test Direct"
    },
    {
        "id_kategoriTest": 1,
        "kategori": "Hematologi",
        "id_jenisTest": 25,
        "jenis": "Hb Elektroforesis"
    },
    {
        "id_kategoriTest": 14,
        "kategori": "Imuno-Serologi",
        "id_jenisTest": 247,
        "jenis": "Anti HBs Titer"
    },
    {
        "id_kategoriTest": 14,
        "kategori": "Imuno-Serologi",
        "id_jenisTest": 248,
        "jenis": "Anti HBc"
    }
]

我想要的输出如下：

血液学

• 库姆斯直接测试
• 血红蛋白电泳

Imuno血清学

• 抗-HBs滴度
• 抗-HBc

---

谢谢。

第一步是将数组排序到更方便的位置。 然后渲染排序后的数组

这里，

myArray

包含上面的数组

  const sorterAR = [];
  myArray.forEach((item) => {
    let cat = sorterAR.find(
      (cat) => cat.id_kategoriTest === item.id_kategoriTest
    );
    if (!cat) {
      cat = {
        id_kategoriTest: item.id_kategoriTest,
        kategori: item.kategori,
        items: [],
      };
      sorterAR.push(cat);
    }
    cat.items.push(item);
  });

  return (
    <div className="App">
      {sorterAR.map((cat) => (
        <>
          <div>
            <b>{cat.kategori}</b>
          </div>
          <ul>
            {cat.items.map((item) => (
              <li>{item.jenis}</li>
            ))}
          </ul>
        </>
      ))}
    </div>
  );

const sorterrar=[]；
myArray.forEach（（项目）=>{
让cat=sorterrar.find(
（cat）=>cat.id\u kategoriTest===item.id\u kategoriTest
);
如果（！cat）{
猫={
id_kategoriTest:item.id_kategoriTest，
kategori:item.kategori，
项目：[]，
};
分拣机推送（cat）；
}
类别项目推送（项目）；
});
返回(
{sorterrar.map（（cat）=>(
{cat.kategori}

{cat.items.map（（item）=>(
{item.jenis}
))}

))}
);

感谢您的帮助，非常感谢。很抱歉，如果我没有提供我尝试过的代码。因为我的代码用重复的类别循环显示结果。