如何映射对象数组列表以显示在日历中？答案

【问题标题】：How to map a list of object arrays to display in calendar?如何映射对象数组列表以显示在日历中？
【发布时间】：2020-09-11 07:35:57
【问题描述】：

我正在使用受Full Calendar 启发的react-big-calendar 来显示事件列表。我能够在日历中显示一个硬编码的日期，但我正在努力显示一个开始和结束时间的对象。我将如何映射此信息列表以便显示所有事件。日历显示this.state.events 中的事件。

这是我要显示的数据列表：

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {start: "2020-09-16 17:00:00", end: "2020-09-16 17:15:00"}
1: {start: "2020-09-16 17:15:00", end: "2020-09-16 17:30:00"} 
2: {start: "2020-09-16 17:30:00", end: "2020-09-16 17:45:00"} 
3: {start: "2020-09-16 17:45:00", end: "2020-09-16 18:00:00"} 
4: {start: "2020-09-16 18:00:00", end: "2020-09-16 18:15:00"} 
5: {start: "2020-09-16 18:15:00", end: "2020-09-16 18:30:00"}
6: {start: "2020-09-16 18:30:00", end: "2020-09-16 18:45:00"}

这是我当前的代码：

 class SchedulePage extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          events: [
            {
              start: start_date,
              end: end_date,
              title: "15 minute interview",
            },
          ],
        };
      }
     
      render() {
        return (
          <div className="calendar-container">
            <Calendar
              localizer={localizer}    
              events={this.state.events}
              style={{ height: "100vh" }}
              onSelectEvent={this.test}
            />
          </div>
        );
      }
    }

【问题讨论】：

标签： javascript reactjs jsx react-big-calendar

【解决方案1】：

他们的演示使用以下格式的事件，将您的事件转换为这种格式：

[
    {
    id: 0,
    title: 'All Day Event very long title',
    allDay: true,
    start: new Date(2015, 3, 0),
    end: new Date(2015, 3, 1),
    },
    {
    id: 1,
    title: 'Long Event',
    start: new Date(2015, 3, 7),
    end: new Date(2015, 3, 10),
    },

【讨论】：

感谢您的提醒。会将它们转换为该格式。您知道如何映射所有数据并轻松显示它们吗？

【解决方案2】：

按照 Çağatay Sel 的建议格式化您的数据，

events = [
    {
      id: 0,
      title: 'All Day Event very long title',
      allDay: true,
      start: new Date(2015, 3, 0),
      end: new Date(2015, 3, 1),
    },
    {
      id: 1,
      title: 'Long Event',
      start: new Date(2015, 3, 7),
      end: new Date(2015, 3, 10),
    },
]

然后在渲染和返回之间解构你的状态（这样更容易处理）

 const { events } = this.state

然后映射您的数据并将所有内容作为道具传递给您的日历组件

<div className="calendar-container">
  {events.map((event, index) => {
      return (
        <Calendar key={index} id={event.id} title={event.title} start= 
        {event.start.toString()} end={event.end.toString()} />
      );
    })}
</div>

您的日历组件也应该使用解构来接收数据

const Calendar = ({ id, title, start, end }) => {
  return (
   ...
  );
};

...

render() {
  const { events } = this.state 

  return (
     <div className="calendar-container">
      {events.map((event, index) => {
          return (
            <Calendar key={index} id={event.id} title={event.title} start= 
            {event.start.toString()} end={event.end.toString()} />
          );
        })}
     </div> 
  );
}

【讨论】：