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

问题描述

我正在使用react-big-calendar暗示的Full 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>
        );
      }
    }

解决方法

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

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

,

按照ÇağataySel建议的格式设置数据，

events = [
    {
      id: 0,{
      id: 1,]

然后破坏渲染和返回之间的状态（更容易处理）

 const { events } = this.state 

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

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