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

Question

这是我的 react-big-calender 组件代码，为什么我的 11:30 事件消失了

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 我无法调试为什么会这样任何帮助或任何想法都会很棒

标签： reactjsreact-big-calendar

Answer 1

我想我明白你在问什么，所以我会尽力帮助你。

• 首先，这是一个重点，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, 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'));
  }
};