Javascript 根据条件，以不同的div渲染阵列

例如，我们有对象数组

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'}
];

我做阵列图后怎么才能得到下面的结构呢？这应该是通用的，因为我们不知道我们将得到的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>

你好

你好

你好

你好

你好

你好

你好

首先尝试按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>
))

Object.values(
arr.reduce（（附件，项目）=>({
…acc，
[项目编号]：（根据[项目编号]| |[]）concat（项目），
}), {})
).map（组=>(
{group.map（项=>(
{item.name}

))}
))

您可以提前分组，然后使用标记呈现结果

var数组=[{id:10，名称：'hello10'}，{id:10，名称：'hello10'}，{id:13，名称：'hello13'}，{id:16，名称：'hello16'}，{id:17，名称：'hello17'}，{id:17，名称：'hello17'}，
分组=数组。减少（（r，o，i，a）=>{
if（o.id==（a[i-1]&&a[i-1].id））{
r[r.length-1]。推（o）；
}否则{
r、 推挤（[o]）；
}
返回r；
}, []);
控制台日志（分组）
.as控制台包装{max height:100%！important；top:0；}
您可以试试这个

let dict = {};
let idArr = [];

const len = arr.length;

//We are grouping our data by id
arr.map((ar) =< {
    if(!dict[ar.id]){
        dict[arr[i].id] = [];
        idArr.push(arr[i].id);
    }
    dict[arr[i].id].push(arr[i]);
});

// Now we will generate the output
idArr.map((id) => {
    return <div>{dict[id].map((elem) => <p>{elem}</p>)}</div>
});

让dict={}；
设idArr=[]；
常数长度=阵列长度；
//我们正在按id对数据进行分组
arr.map（（ar）=<{
如果（！dict[ar.id]）{
dict[arr[i].id]=[]；
推送（arr[i].id）；
}
dict[arr[i].id].push（arr[i]）；
});
//现在我们将生成输出
idArr.map（（id）=>{
返回{dict[id].map（（elem）=>{elem}
）}
});
我不明白。什么条件会改变渲染以及根据所述条件可以得到什么输出？这也起作用：Object.values（arr.reduce（（acc，item）=>{（acc[item[“id”]]=acc[item[“id”]]]| |[]）。push（item）；return acc；}，{}）