Javascript 如何在对div中具有相同日期的项进行分组时按日期呈现列表

我有一个100多个对象的数组，每个对象中都有一个日期值：

let items = [
  {
    ...,
    date: '1/25/2020
  }, {
    ...,
    date: '1/25/2020
  }, {
    ...,
    date: 1/24/2020
  }, {
    ...
  },
  ...
]

我现在的问题是，我正在尝试构建所有这些按日期分组的项目

这是我的一些错误代码：

let currentDate = ''

<div className={`items-container ${isLoading ? 'is-loading' : undefined}`}>
    {
        !isLoading &&
        items.map((item, i) => {
            if (new Date(item.created_at).toLocaleDateString() === currentDate) {
                return (
                    <div>
                        <p>{item.message}</p>
                    </div>
                )
            } else {
                return (
                    <>
                        <div className='date-group'>
                            etc etc
                        </div>
                    </>
                )
            }
        })
    }
</div>

让currentDate=''
{
！正在加载&&
items.map（（item，i）=>{
if（新日期（项.created_at）.toLocaleDateString（）==当前日期）{
返回(
{item.message}

)
}否则{
返回(
等等
)
}
})
}

最终结果类似于这样，其中具有相同日期的项目位于相同日期组div中

<div className='date-group'>
  <div className='item'></div>
  <div className='item'></div>
  <div className='item'></div>
</div>
<div className='date-group'>
  <div className='item'></div>
  <div className='item'></div>
</div>
<div className='date-group'>
  <div className='item'></div>
  <div className='item'></div>
  <div className='item'></div>
</div>

有用的注意事项，数组已按日期排序，因此无需先排序

---

谢谢你的帮助

下面是一个简单的示例，说明您的目标。首先，我们在对象中按日期对

项

数组进行分组，然后使用

object.entries

迭代这些分组

let items = [{
    message: "First",
    date: "1/25/2020"
  }, {
    message: "Second",
    date: "1/25/2020"
  }, {
    message: "Third",
    date: "1/24/2020"
  }];

// Group your items
grouped = items.reduce((acc, el) => {
  if(!acc[el.date]) acc[el.date] = [];
  acc[el.date].push(el);
  return acc;
}, {});

在JSX中，现在可以映射条目

{Object.entries(grouped).map(([date, options]) => {
  return (
  <div className='date-group'>
    {options.map(el => <div className='item'>{el.message}</div>)}
  </div>
  )
})}

{Object.entries（grouped.map）（[date，options]）=>{
返回(
{options.map（el=>{el.message}}
)
})}