Javascript 映射要在日历/表格中显示的对象数组

我正在尝试使用

react big calendar

在日历中显示一组数据。以下是我试图显示的数据。由于某些原因，它没有显示任何数据。我能够在单个事件中硬编码，但我希望能够映射数据并显示所有7个事件<代码>事件是日历获取数据以显示的位置。我尝试将其更改为

events:{data}

，但最终没有结果

this.state.interview_日期：

0: {start: Wed Sep 16 2020 17:00:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 17:15:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
1: {start: Wed Sep 16 2020 17:15:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 17:30:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
2: {start: Wed Sep 16 2020 17:30:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 17:45:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
3: {start: Wed Sep 16 2020 17:45:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:00:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
4: {start: Wed Sep 16 2020 18:00:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:15:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
5: {start: Wed Sep 16 2020 18:15:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:30:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
6: {start: Wed Sep 16 2020 18:30:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:45:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"}

我的代码：

var start_date = new Date("2020-09-09 18:00:00");
start_date.toString();
var end_date = new Date("2020-09-09 19:00:00");
end_date.toString();

 class SchedulePage extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          events: [
            {
              start: start_date,
              end: end_date,
              title: "15 minute interview",
            },
          ],
        };
      }

  render() {
    if (this.state.interview_dates === undefined) {
      return null;
    }

    const data = this.state.interview_dates.map((item) => {
      return {
        start: item.start,
        end: item.end,
        title: item.title,
      };
    });
    console.log(data);

    return (
      <div className="calendar-container">
        <Calendar
          localizer={localizer}
          views={["month", "week"]}
          defaultDate={new Date()}
          defaultView="week"
          events={this.state.events}
          style={{ height: "100vh" }}
          onSelectEvent={this.test}
          step={15}
          min={new Date(2020, 1, 0, 6, 0, 0)}
          max={new Date(2020, 1, 0, 23, 0, 0)}
        />
        <ScheduleInterview
          onClose={this.showCreateInterview}
          show={this.state.createInterview}
        />
      </div>
    );
  }

var开始日期=新日期（“2020-09-09 18:00:00”）；
start_date.toString（）；
var结束日期=新日期（“2020-09-09 19:00:00”）；
end_date.toString（）；
类SchedulePage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动：[
{
开始：开始日期，
结束：结束日期，
标题：“15分钟访谈”，
},
],
};
}
render（）{
如果（this.state.interview_dates===未定义）{
返回null；
}
const data=this.state.interview\u dates.map（（项目）=>{
返回{
开始：item.start，
结束：item.end，
标题：item.title，
};
});
控制台日志（数据）；
返回(
);
}

在正确读取对象数组中的日期时，这可能是一个问题。文档说明“开始”和“结束”值应为日期。这也可能是由于您在日历上设置了最小/最大道具。您似乎将日历限制在1月1日06:00到1月1日23:00之间。请尝试此方法（假设

时刻

是您的定位点）：

class SchedulePage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动：[
{
开始：开始日期，
结束：结束日期，
标题：“15分钟访谈”，
},
],
};
}
render（）{
如果（！this.state.interview_dates）{//更新为包含null、未定义、false
返回null；
}
const data=this.state.interview\u dates.map（（项目）=>{
返回{
开始：时刻（item.start）.toDate（），
结束：力矩（item.end）.toDate（），
标题：item.title，
};
});
控制台日志（数据）；
返回(
);
}