javascript - 根据条件在不同的div中 react ，渲染数组

Question

例如我们有对象数组；

let arr = [
    {id: 10, name: 'hello10'}, 
    {id: 10, name: 'hello10'},
    {id: 13, name: 'hello13'},
    {id: 16, name: 'hello16'},
    {id: 17, name: 'hello17'},
    {id: 17, name: 'hello17'},
    {id: 17, name: 'hello17'}
];

在我制作数组映射之后，如何在 React 中获得下面的结构？这应该是通用的，因为我们不知道我们将获得的 ID。

<div>
    <p>hello10</p>
    <p>hello10</p>
</div>
<div>
    <p>hello13</p>
</div>
<div>
    <p>hello16</p>
</div>
<div>
    <p>hello17</p>
    <p>hello17</p>
    <p>hello17</p>
</div>

Answer 1

首先尝试按 id 对数据进行分组:

Object.values(
  arr.reduce((acc, item) => ({
    ...acc,
    [item.id]: (acc[item.id] || []).concat(item),
  }), {})
).map(group => (
  <div>
    {group.map(item => (
      <p>{item.name}</p>
    ))}
  </div>
))