fullcalendar.io上的活动增加了一倍

Question

我的项目使用rails和react.js。假设我创建了事件A，但我改变主意并取消了它（通过引导模式），然后我启动另一个事件B并确认它，事件A仍然创建。我是不是错过了什么？

componentDidMount: function(){
    var self = this;
    var events = [];
    $('#calendar').fullCalendar({
      googleCalendarApiKey: self.props.publicApi,
      defaultView: 'agendaWeek',
      minTime: '08:00:00',
      maxTime: '18:00:00',
      height: 'auto',
      timezone: 'local',
      firstDay: moment().day(),
      allDaySlot: false,
      selectable: true,
      select: function(start, end){
        $('#myModal').modal('show')
        $('#proceed-to-payment').on('click', function(){
          var durationString = $('#time-select').find(':selected').text()
          var duration = parseFloat(durationString)
          var eventData;
          end.set('hour', start.hour() + duration  )
          end.set('minutes', start.minutes())
          eventData = {
            title: "New Event",
            start: start.format(),
            end: end.format()
          };
          $('.fc-event').remove();
          $('#calendar').fullCalendar('renderEvent', eventData);
          var url = '/appointment/' + self.state.sportCenter.id + '/appointments'
          $.post(url, {
            start: start.format(),
            duration: duration,
            title: "Appointment set by " + self.state.user.first_name + " " + self.state.user.last_name,
            user_id: self.state.user.id,
            appointment_id: self.state.appointment.id
          })
        })
        $('#calendar').fullCalendar('unselect');
      },
      eventSources: [{
              googleCalendarId: self.state.email_address
            }]
    });
this.state.appointments.forEach(function(appointment){
  events.push( self.initalizeOldEvents(appointment) )
});
$('#calendar').fullCalendar('addEventSource', events );
},

Answer 1

如果您将Flux与React一起使用，您会发现您会将组件的状态取出并将其放入存储中。这将极大地简化组件，因为它们总是只询问存储区的状态并使用该状态进行渲染。