我在日历视图中显示了当天的所有事件，但是一旦我将事件移至晚上11:30的时间段，它就会从日历中消失

问题描述

这是我的react-big-calender组件代码，为什么我11:30的事件消失了没有任何帮助，这很好，我通过后端的api通过api获取事件详细信息，并且我获得了该事件的开始时间，添加

import React,{ useState,useEffect } from 'react';
    import { Calendar,momentLocalizer } from 'react-big-calendar';
    import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
    import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
    import 'react-big-calendar/lib/css/react-big-calendar.css';
    import { changeAppointment } from '../api';
    
    export default function Calender(props) {
        const { date } = props;
        const { data } = props;
        const localizer = momentLocalizer(moment);
        const DnDCalendar = withDragAndDrop(Calendar);
        const [events,setEvents] = useState([]);
        const { t } = useTranslation();
    
        useEffect(() => {
            let tempEvents = [];
            data.forEach(element => {
                const data = {
                    title: element.patient.name + ',' + element.patient.phone,id: element.id,start: moment.utc(element.datetime).toDate(),end: moment
                        .utc(element.datetime)
                        .add(25,'minutes')
                        .toDate()
                };
                tempEvents.push(data);
                setEvents(tempEvents);
            });
        },[data]);
    
        const onEventResize = data => {
            const { start,end,event } = data;
            const newEvents = [...events];
            newEvents.forEach(existingEvent => {
                if (existingEvent.id === event.id) {
                    existingEvent.start = start;
                    existingEvent.end = end;
                    const info = {
                        id: event.id,datetime: moment.utc(start).format()
                    };
                    changeAppointment(info)
                        .then(info => {
                            console.log(info,'infooo');
                            if (info) {
                                sendToast(t('AppointmentEdited'));
                            } else {
                                sendErrorToast(t('ErrorMessage'));
                            }
                        })
                        .catch(err => {
                            console.log(err,'error');
                            sendErrorToast(t('ErrorMessage'));
                        });
                }
            });
            setEvents(newEvents);
        };
    
        const sendToast = message => {
            toast(() => {
                return (
                    <Toaster>
                        <p>{message}</p>
                    </Toaster>
                );
            });
        };
    
        const sendErrorToast = message => {
            toast.error(() => {
                return (
                    <ToasterError>
                        <p>{message}</p>
                    </ToasterError>
                );
            });
        };
    
        return (
            <Box>
                <DnDCalendar
                    formats={{
                        dayHeaderFormat: date => moment(date).format('Do MMM,YYYY')
                    }}
                    localizer={localizer}
                    defaultDate={date}
                    defaultview="day"
                    timeslots={1}
                    view={'day'}
                    views={{
                        day: true
                    }}
                    min={new Date(0,9,0)}
                    // max={new Date(0,23,30,0)}
                    events={events}
                    onEventDrop={onEventResize}
                    onEventResize={onEventResize}
                    resizable
                    step={30}
                    selectable={true}
                />
            </Box>
        );
    }

我将事件移至11:30的时间段后，它就消失了，我不知道发生了什么事，任何帮助都会很大，我为此附上了一个gif here 我无法调试为什么这会发生任何帮助或任何想法都很好

解决方法

我想我理解您的要求，所以我会尽力帮助您。

• 首先，这是要点，RBC对所有日期都使用真正的JS Date对象。您绝对可以使用Moment进行操作，但是当您将其返回给RBC时，它必须是真正的JS Date对象。
• 接下来，您正在使用异步调用来更新事件，但是在更新数据之前，您要在该调用之外进行setEvents
• 最后，您在onEventResize中要做很多工作，可以简化。如果我正确阅读所有内容，则需要做的是：
  • 更新事件以进行请求
  • 进行异步调用以更新远程数据
  • 流行吐司
  • 用更新的events项目更新您的event

// make 'changeAppointment' create your 'info'
const changeAppointment = (updatedEvent) => {
  const { id,start,end } = updatedEvent; // you're not doing anything with the 'end'?
  // Remember,RBC works with true JS Date objects,so its unambiguous by default
  const info = { id,datetime: moment(start).format() }; // again,the 'end'?
  return yourActualAPICallHere(info);
};

// 'event' was the initial event,while 'start' and 'end' represent the new data
const onEventResize = async ({ event,end }) => {
  const newEvent = { ...event,end }; // brand new 'object' here
  try {
    const updatedEvent = await changeAppointment(newEvent);
    if (updatedEvent) {
      sendToast(t('AppointmentEdited'));
      // assumes this was a useState var
      setEvents((prevEvents) => {
        // get all other events
        const filtered = prevEvents.filter((item) => item.id !== event.id);
        return [...filtered,updatedEvent];
      });
    } else {
      // a throw here will fire the 'catch',even in your example
      throw new Error();
    }
  } catch (err) {
    sendErrorToast(t('ErrorMessage'));
  }
};