Javascript 显示基于相似日期的列表项列表

目前我有以下清单：

如您所见，这些项目的日期相同，

21/09

。当列表项具有相同的日期（

yyyy/mm/dd

）时，我希望它如下所示：

（对不起我的画）

我想将具有相同日期的项目分组到一个标题下，该标题告诉它们的共同日期

我已经尝试解决这个问题有一段时间了，但我无法开始。每次我想出来的东西都不管用（我知道很难过）

我想我首先需要以

yyyy/mm/dd

格式获取所有事件项的日期，然后以某种方式检查该日期的evens是否包含一个或多个事件。如果他们这样做了，他们将得到一个标题和他们的日期，所有的事件将显示在下面。否则将不显示任何内容

如果你有任何建议，请告诉我

谢谢你的阅读

编辑 因此，保存所有这些列表的父组件是dash.js：

events
  .slice(-this.state.showCount)
  .reverse()
  .map((event, i) => {
    var driver = event.driver ? keyedDrivers[event.driver] : false
    var carrier = driver ? keyedCarriers[driver.carrier] : false
    var customer = event.customer
      ? keyedCustomers[event.customer]
      : false

    return (
      <div key={i}>
        <EventItem // This is the list item
          event={event}
          customer={customer}
          carrier={carrier}
          driver={driver}
          lock={keyedLocks[event.unit] || { address: {} }}
        />
      </div>
    )
  })

---

最好的方法可能是将一个输入列表转换为一个组列表（按日期）

现在，您可以

将其从列表中缩减为一个按日期键入的对象

const output = input.reduce((dates, item) => {
    if (dates[item.date]) {
        dates[item.date].push(item)
    } else {
        dates[item.date] = [item]
    }

    return dates
}, {})

// returns

{
  '21/09': [
    { date: '21/09' },
    { date: '21/09' },
  ],
  '22/09': [{ date: '22/09' }],
  '23/09': [{ date: '23/09' }],
  '24/09': [
    { date: '24/09' },
    { date: '24/09' },
  ]
}

然后你就可以做了

Object.keys(output).map(date => (
  <div key={date}>
    <Heading>{date}</Heading>
    {output[date].map(item => (
      <Item>
      ...
      </Item>
    ))}
  </div>
))

Object.keys（输出）.map（日期=>(
{date}
{输出[日期].map（项=>(
...
))}
))

您可以做很多事情来整理代码，但希望它足以让您开始使用一个名为的方法。我想你可以利用它。还有一些方法可以在没有第三方库的情况下使用

示例

let eventsGroups = _.groupBy(events, (event) => moment(event.timestamp).format('YYYY/MM/DD'))

renderEvents() {
  return Object.keys(eventsGroups).map((groupName) => {
    return (
      <div>
        { renderHeader(groupName) }
        { renderEvents(eventsGroups[groupName]) }
      </div>
    )
  });
}

renderHeader(groupName) {
  return <h1>{groupName}</h1>
}

renderEvents(events) {
  return events.map((event) => {
    return <EventItem event={event} />
  })
}

let eventsGroups=..groupBy（events，（event）=>moment（event.timestamp）.format（'YYYY/MM/DD'））
渲染器（）{
返回Object.keys（eventsGroups.map）（（groupName）=>{
返回(
{renderHeader（groupName）}
{renderEvents（eventsGroups[groupName]）}
)
});
}
renderHeader（组名）{
返回{groupName}
}
渲染器（事件）{
返回事件。映射（（事件）=>{
返回
})
}
非常酷的东西，谢谢！我试过了，我可以看到它是如何按日期将事件分组到对象中的。现在我只是想知道如何利用它将日期显示为标题以及下面的事件。@MartinNordström用更多的代码更新了答案。希望它会更清楚。是的，你很清楚。只是想知道我应该如何用我的代码实现它（很抱歉，这里的程序员很不错！）没关系，但很抱歉我不能帮你。这需要一个很长很详细的答案。试着分析我的答案，一点一点地理解我在做什么。有了这些，我相信你可以自己实现它。你说得对极了，其余的都应该没问题。
Object.keys(output).map(date => (
  <div key={date}>
    <Heading>{date}</Heading>
    {output[date].map(item => (
      <Item>
      ...
      </Item>
    ))}
  </div>
))

let eventsGroups = _.groupBy(events, (event) => moment(event.timestamp).format('YYYY/MM/DD'))

renderEvents() {
  return Object.keys(eventsGroups).map((groupName) => {
    return (
      <div>
        { renderHeader(groupName) }
        { renderEvents(eventsGroups[groupName]) }
      </div>
    )
  });
}

renderHeader(groupName) {
  return <h1>{groupName}</h1>
}

renderEvents(events) {
  return events.map((event) => {
    return <EventItem event={event} />
  })
}