javascript - 如何使用 fetch 恢复使用 React fullCalendar 的拖放事件？

Question

我有一个反应FullCalendar并且我希望当我拖放事件时，会出现一个带有取消按钮的小吃栏，当我单击它时，我将调用拖放的恢复功能。

我的拖放功能是：

       moveEvent = (info) => {

          const formData = new FormData();

          formData.append('idplanning', info.event.extendedProps.idtranche);
          formData.append('bdebug', "0");
          formData.append('heuredebut', moment(info.event.start).format('HH:mm'));
          formData.append('heurefin', moment(info.event.end).format('HH:mm'));
          formData.append('dateplanning', momentStringS);

          axios({
            method: 'post',
            url: process.env.REACT_APP_API_BACKEND+'update_heure_planning/'+this.state.entite,
            data: formData,
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
            }
          })
          .then (()=>{
            this.setState({
              openLoading: true, 
              infos: info
            })
            localStorage.removeItem( 'Liste de planning de ' + this.state.nom_user);
            this.fetchData(this.state.nom_user, this.state.identifiant_user);
          })
       }

我的日历是：

           <FullCalendar 
                 allDaySlot={false}
                 defaultView="timeGridWeek"
                 locale={frLocale}
                 weekNumbers={true}
                 plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                 ref={this.calendarComponentRef}
                 events={this.state.events}
                 displayEventEnd={true}
                 editable= {true}
                 selectable={true}
                 select={this.newEvent}
                 selectMirror={true}
                 eventDrop={(info)=>this.moveEvent(info)}
               />

当我运行它时，拖放效果很好，但是当我单击小吃栏的取消按钮时，会出现最近和旧事件：

我的小吃店：

<Snackbar anchorOrigin={{vertical: 'bottom',  horizontal: 'center'}}
              open={this.state.openLoading}
              autoHideDuration={400}
              onClose={this.handleCloseLoading}
              ContentProps={{  'aria-describedby': 'message-id' }}
              message={<span id="message-id">Enregistrement ...</span>}
              action={[
              <IconButton
                key="close"
                aria-label="Close"
                color="inherit"
                //className={classes.close}
                onClick={(this.handleClose)}
              >
                <CloseIcon />
              </IconButton>,
            ]}
          />
          {/* Snackbar d'enregistrement et d'annulation*/}      
            <Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center'}}
              open={this.state.open}
              autoHideDuration={6000}
              onClose={this.handleClose}
              ContentProps={{  'aria-describedby': 'message-id' }}
              message={<span id="message-id">Evénement enregistré</span>}
              action={[
              <Button key="undo" color="secondary" size="small" onClick={() => this.state.infos.revert()}>
                Annuler
              </Button>,
              <IconButton  key="close" aria-label="Close" color="inherit" onClick={this.handleClose}>
                <CloseIcon />
              </IconButton>,
            ]}
          />

我的获取是：

fetchData = (nom,identifiant_user) => {

    this.setState({
      events: [],
      evtStorage:[],
      prevEvents:[], 
      evtBackend:[]
    })
    const praticiensCached = JSON.parse(localStorage.getItem('Liste de praticiens '));
    for (let j = 0; j < praticiensCached.length; j++) {
      if(this.state.id_user === praticiensCached[j].id_user){
        this.state.identifiant_user = praticiensCached[j].identifiant_user;
        this.state.nom_user = praticiensCached[j].nom_user;
      }
    } 
    /**
     * * API de GET Liste de planning
    */
    fetch(process.env.REACT_APP_API_BACKEND+'get_liste_planning/'+this.state.entite+'?start='+moment().startOf('isoweek').toJSON()+'&end='+moment().endOf('isoweek').toJSON()+'&identifiant_user='+identifiant_user)
      .then(Response => Response.json())
      .then(data => {
        let evts = data.ListeResult;
        for (let i = 0; i < evts.length; i++) {
          evts[i].start = moment(evts[i].start).toDate();
          evts[i].end = moment(evts[i].end).toDate();
          this.state.evtBackend.push(evts[i])
        }       

        this.setState({
          evtBackend: evts,
          events:  evts
        })
      }) 
}

我想要什么时候，我点击取消按钮，只会检索旧事件，而不是最近和旧的。

当我删除

.then (()=>{ localStorage.removeItem( 'Liste de planning de ' + this.state.nom_user); this.fetchData(this.state.nom_user, this.state.identifiant_user); }) })

它可以工作，但它没有保存在后端。

我该如何解决？

标签： javascriptreactjsfullcalendarfetchfullcalendar-4