Javascript 循环通过事件数组&；在日历上显示

我创建了一个反应日历组件：

我试图循环浏览一系列事件，并在相应的一天展示该事件

这是事件数组：

const events = [
  {
    title: 'Today',
    start: new Date()
  }
]

这是渲染单元格的代码：

const Cells = ({currentMonth, events}) => {

  const monthStart = dateFns.startOfMonth(currentMonth);
  const monthEnd = dateFns.endOfMonth(monthStart);
  const startDate = dateFns.startOfWeek(monthStart);
  const endDate = dateFns.endOfWeek(monthEnd);

  const dateFormat = "D";
  const rows = [];

  let days = [];
  let day = startDate;
  let formattedDate = "";



  while (day <= endDate) {

    for (let i = 0; i < 7; i++) {

      formattedDate = dateFns.format(day, dateFormat);

      const event = events.filter((event, i) => dateFns.format(event.start, 'MM/DD/YYYY') ===  dateFns.format(day, 'MM/DD/YYYY'))

       console.log(event)

      days.push(
        <Cell today={dateFns.isSameDay(day, new Date())} key={day}>
          <span>{formattedDate}</span>
          <div>Event</div>
        </Cell>
      );

      day = dateFns.addDays(day, 1);
    }

    rows.push(
      <Row key={day}>
        {days}
      </Row>
    );

    days = [];
  }

  return <DateWrapper>{rows}</DateWrapper>;
}

这是console.log输出：

当一个数组按计划返回事件时：

[{…}]
0: start: Fri Apr 12 2019 18:43:50 GMT-0400 (Eastern Daylight Time) {}
title: "Today"

所以我的问题是，在这一部分中，展示事件的正确方式是什么。将“事件”一词替换为实际事件标题：

days.push(
 <Cell today={dateFns.isSameDay(day, new Date())} key={day}>
  <span>{formattedDate}</span>
  <div>Event</div>
 </Cell>
);

days.push(
{formattedDate}
事件
);

正如我最初所想，这有点复杂。我想你应该做一些像下面这样的事情

const eventsArray = events.reduce(
  (a, b) => { 
    (a[dateFns.format(b.start, 'MM/DD/YYYY')] = a[dateFns.format(b.start, 'MM/DD/YYYY')] || []).push(b);
    return a
  }, 
 {})

然后，您将按日期对事件进行分组。最后，您可以将它们映射到

单元

组件

let days 
days = Object.keys(eventsArray).map((day, index) =>
    <Cell today={dateFns.isSameDay(day, new Date())} key={day}>
      <span>{day}</span>
      {eventsArray[day].map(event => <div>{event.title}</div>)}
    </Cell>)
);

let days
天=对象.keys（eventsArray）.map（（天，索引）=>
{day}
{eventsArray[day].map（event=>{event.title}）
)
);

正如我最初所想，这有点复杂。我想你应该做一些像下面这样的事情

const eventsArray = events.reduce(
  (a, b) => { 
    (a[dateFns.format(b.start, 'MM/DD/YYYY')] = a[dateFns.format(b.start, 'MM/DD/YYYY')] || []).push(b);
    return a
  }, 
 {})

然后，您将按日期对事件进行分组。最后，您可以将它们映射到

单元

组件

let days 
days = Object.keys(eventsArray).map((day, index) =>
    <Cell today={dateFns.isSameDay(day, new Date())} key={day}>
      <span>{day}</span>
      {eventsArray[day].map(event => <div>{event.title}</div>)}
    </Cell>)
);

let days
天=对象.keys（eventsArray）.map（（天，索引）=>
{day}
{eventsArray[day].map（event=>{event.title}）
)
);

根据事件发生的日期，将事件数组缩减为数组数组（或可能缩减为对象数组，键为日期）（如果事件在几天之间分割，则可能需要使用条件）。然后根据每个子数组对应的日期对该数组进行排序，然后在一个

单元格中渲染子数组，查看是否有示例？我必须承认，我不太喜欢这个function@seethrough我有点用它：const event=events.reduce（（a，b）=>{let_event=dateFns.format（a，'MM/DD/yyyyy'）===dateFns.format（b.start，'MM/DD/yyyyy'）？b:null返回{day:dateFns.format（a，'MM/DD/yyyyyy'），事件：}，day）我让它在只有一个事件时工作，但一旦有多个事件，一切都会一团糟。因此，我更接近于……根据事件发生的日期（如果事件在几天之间发生，您可能需要使用条件），将事件数组减少为数组数组（或者可能减少为对象数组，键为日期）。然后根据每个子数组对应的日期对该数组进行排序，然后在一个
单元格中渲染子数组，查看是否有示例？我必须承认，我不太喜欢这个function@seethrough我有点用它：const event=events.reduce（（a，b）=>{let_event=dateFns.format（a，'MM/DD/yyyyy'）===dateFns.format（b.start，'MM/DD/yyyyy'）？b:null返回{day:dateFns.format（a，'MM/DD/yyyyyy'），事件：}，day）我让它在只有一个事件时工作，但一旦有多个事件，一切都会一团糟。所以我更接近。。。