如何在大日历中显示Firebase中的事件

Question

我正在使用React和Firebase制作一个事件调度程序。我正在使用大日历插件。因此，我尝试使用firebase中的事件填充日历。 Firebase中的事件有一个日期，因此它们应该显示在日历上，但是日历上什么也没有显示。有人知道如何以大日历显示来自Firebase的事件吗？

import React from "react";

import "./index.css";


import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";

import "./App.css";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";import BigCalendar from 'react-big-calendar'
import moment from "moment";
import Calendar from 'react-calendar'
// could also import the sass if you have a loader at dayz/dayz.scss

import { tasksRef, timeRef } from './firebase';
const defaultColor = "#000";
moment.locale('en-GB');const localizer = BigCalendar.momentLocalizer(moment) 

class Show extends React.Component {
  state = {
    events: [],
   loading: true
  };

   onEventResize = (type, { event, start, end, allDay }) => {
    this.setState(state => {
      state.events[0].start = start;
      state.events[0].end = end;
      return { events: state.events };
    });
  };

  onEventDrop = ({ event, start, end, allDay }) => {
    console.log(start);
  };

  componentWillMount() {

      tasksRef.on('value', snap => {
      const tasks = [];
      let events = []
      snap.forEach(shot => {
       events.push({ ...shot.val(), key: shot.key });
      });
      this.setState({ events: events, Loading: false });
    });
  }

      render(){

    const { events, Loading } = this.state;
    const orderedcars = events;

    let List;


    if (Loading) {
      List = <div className="TaskList-empty">Loading...</div>;
    } else {

     List = (
  <div>
    <table>
      <thead>
        <tr>
          <th scope="row">Event Name</th>
          <th scope="row">Event date</th>
          <th scope="row">Event timeRef</th>
        </tr>
      </thead>
      <tbody>
        {events.map(car => (
          <tr>
            <td>{car.name}</td>
            <td>{car.timeRef}</td>
            <td>{car.description}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);
}
 return(


 <div>


 {List}
   <BigCalendar


      localizer={localizer}
      startAccessor="startDate"
      endAccessor="startDate"
       events={this.state.events}
          defaultView='week'
          scrollToTime={new Date(1970, 1, 1, 6)}
    />


   </div>
        );
    }



}


export default Show;