Question

目前我有这个清单：

如您所见，这些项目具有相同的日期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>
    )
  })

在EventItem内部，我只使用传递给EventItem的所有道具来显示列表。

此外，事件对象包含日期：

一个事件对象：

_id: ObjectId("12345")
customer: ObjectId("54321")
timestamp: 2017-08-25T12:04:14.001Z

Answer 1

执行此操作的最佳方法可能是将您的一个输入列表转换为组列表（按日期）

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

现在，您可以从列表中reduce将此内容转换为按日期键入的对象

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>
))

你可以做很多事情来整理代码，但希望它足以开始使用

Answer 2

Lodash有一个名为groupBy的方法。我想你可以利用它。还有一些方法可以在没有第三方库的情况下使用。

示例

Superview

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

修改

一个事件对象：

2 个答案: