Блог

это мой код компонента react-big-calender, почему мое событие в 11: 30 исчезло, любая помощь была бы отличной, я получаю информацию о событиях через api из back-end, и я получил время начала события, и я добавляю

 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, 0, 0, 9, 0, 0)}
                    // max={new Date(0, 0, 0, 23, 30, 0)}
                    events={events}
                    onEventDrop={onEventResize}
                    onEventResize={onEventResize}
                    resizable
                    step={30}
                    selectable={true}
                />
            </Box>
        );
    }
  

как только я переношу событие на временной интервал 11: 30, оно исчезло, я не знаю, что происходит, любая помощь была бы отличной, я прикрепляю gif с этимздесь
я не могу отладить это, почему это происходит, любая помощь или какие-либо идеи были бы замечательными

Я думаю, что понимаю, о чем вы спрашиваете, поэтому я постараюсь вам помочь.

• Во-первых, и это важный момент, RBC использует объекты true JS Date для всех дат. Вы можете использовать Moment для манипуляций, но когда вы возвращаете его в RBC, это должен быть настоящий объект даты JS.
• Затем вы используете асинхронный вызов для обновления своего события, но вы делаете 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, start, end }) => {
  const newEvent = { ...event, start, 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'));
  }
};