更改日期时，我有一个带有默认日视图的React大日历，它不更新日历视图数据

问题描述

我有一个组件，该组件可用于更改我希望React大日历随该日期更改而更新的日期，但是当更新日期时，新事件未反映在日历中，这是我的组件

import React,{ useState,useEffect } from 'react';
import { Calendar,momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import { Box } from './styled';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';

export default function Calender(props) {
    const { date,handleDateTimeChange,data } = props;
    const localizer = momentLocalizer(moment);
    const DnDCalendar = withDragAndDrop(Calendar);
    const [events,setEvents] = useState([]);

    useEffect(() => {
        let tempEvents = [];
        data.forEach((element) => {
            console.log(element.datetime,"datetime-=-=")
            const data = {
                title: element.patient.name + ',' + element.patient.phone,id: element.id,start: moment.utc(element.datetime).toDate(),end: moment.utc(element.datetime).add(30,'minutes').toDate(),};
            tempEvents.push(data);
        });
        console.log(tempEvents,data,"tempdate")
        setEvents(tempEvents);
    },[data,date]);

    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(),};
                handleDateTimeChange(info);
            }
        });
        setEvents(newEvents);
    };
    console.log(date,"-=-=-=-=")
    return (
        <Box>
            <DnDCalendar
                formats={{
                    dayHeaderFormat: (today) =>
                        moment(date).format('Do MMMM,YYYY'),}}
                localizer={localizer}
                defaultDate={Date(date)}
                defaultview={'day'}
                timeslots={1}
                views={{
                    day: true,}}
                min={new Date(0,9,0)}
                max={new Date(0,23,0)}
                events={events}
                onEventDrop={onEventResize}
                onEventResize={onEventResize}
                resizable
                step={30}
                selectable={true}
            />
        </Box>
    );
}

我能够看到日期更改，并且数据也来自后端，但是我无法在日历视图中显示该更改，只是不将事件添加到事件列表中就可以了在此先感谢您。 这是相同的图片here

解决方法

这是您使用受控date的实例，我认为这同时需要date和onNavigate。这是控制date的唯一方法。