React-Big-Calendar、下一个和后退按钮未导航到正确的月份

Question

我目前正在我的 React 项目中使用 React-Big-Calendar 库来显示带有内置导航按钮（今天、下一个和后退）的日历。但是，我遇到了一个问题，即“下一步”和“后退”按钮无法导航到正确的月份。

当我使用日历组件中的 onNavigate 属性记录月份值时，我可以看到月份在控制台中正确更改。但是，当我单击“下一步”或“后退”按钮时，日历视图本身不会切换到所选月份。

我已经验证了 onNavigate 回调被触发，并且回调中的日期参数正确反映了新的月份。问题似乎与日历视图的渲染有关。

"use client";
import React, { useState, useEffect, useMemo } from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
// const localizer = momentLocalizer(moment);
export default function ComplianceCalender() {
  const [events, setEvents] = useState([]);
  const localizer = useMemo(() => momentLocalizer(moment), [])
  const [todayDate, setTodayDate] = useState(
    new Date().toISOString().substring(0, 10).replace(/-/g, "-")
  );
  useEffect(() => {
    fetch(
"/api/activity-calender?filterCurrentMonth=${todayDate}"
    )
.then((response) => response.json())
      .then((data) => {
        const activitylist = data;
        // console.log("activitylist--------->>>>>>" , activitylist)
        const mappedData = activitylist.map((item) => {
          const calenderData = {
            id: item.id,
            title: item._count,
            start: item.executor_due_date,
            end: item.executor_due_date,
          };
          return calenderData;
        });
        setEvents(mappedData);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, [todayDate]);
  const handleCalendarNavigate = (date) => {
    console.log("Month ----->>>", moment(date).format("MMMM YYYY"));
    const formattedDate = date.toISOString().substring(0, 10).replace(/-/g, "-");
    setTodayDate(formattedDate);
  };
  return (
    <>
      <div className="row custom_row bg-white rounded-corner h-100 p-4">
        <div className="col-md-12 px-0">
          <Calendar
            localizer={localizer}
            events={events}
            // startAccessor="start"
            // endAccessor="end"
            style={{ height: 580 }}
            onSelectEvent={openModal}
            onNavigate={handleCalendarNavigate}
          />
        </div>
      </div>
    </>
  );
}

我期望当我单击 React-Big-Calendar 中的“下一步”或“后退”按钮时，日历视图将分别导航到相应的下个月或上个月。我尝试使用 onNavigate 属性记录月份值，以确保回调被触发并且所选月份是正确的。

Answer 1

我尝试复制粘贴您的代码并亲自测试它，它非常适合我。我所做的就是注释掉你的

onSelectEvent

并将

activityList

更改为一些随机的东西来测试。

预览如下：

这是代码：

    import React, {useEffect, useState, useMemo} from 'react';
    import { Calendar, momentLocalizer } from "react-big-calendar";
    import moment from "moment";
    import "react-big-calendar/lib/css/react-big-calendar.css";
    
    function App() {
        const [events, setEvents] = useState([]);
        const localizer = useMemo(() => momentLocalizer(moment), [])
        const [todayDate, setTodayDate] = useState(
            new Date().toISOString().substring(0, 10).replace(/-/g, "-")
        );
        useEffect(() => {
            fetch(
                "/currentMonth.json"
            )
                .then((response) => response.json())
                .then((data) => {
                    const activityList = data;
                    console.log("activitylist--------->>>>>>" , activityList)
                    const mappedData = activityList.map((item) => {
                        const calenderData = {
                            id: item.id,
                            title: item._count,
                            start: item.executor_due_date,
                            end: item.executor_due_date,
                        };
                        return calenderData;
                    });
                    setEvents(mappedData);
                })
                .catch((error) => {
                    console.error("Error fetching data:", error);
                });
        }, [todayDate]);
        const handleCalendarNavigate = (date) => {
            console.log("Month ----->>>", moment(date).format("MMMM YYYY"));
            const formattedDate = date.toISOString().substring(0, 10).replace(/-/g, "-");
            setTodayDate(formattedDate);
        };
    
        return (
            <>
                <div className="row custom_row bg-white rounded-corner h-100 p-4">
                    <div className="col-md-12 px-0">
                        <Calendar
                            localizer={localizer}
                            events={events}
                            // startAccessor="start"
                            // endAccessor="end"
                            style={{ height: 580 }}
                            //onSelectEvent={openModal}
                            onNavigate={handleCalendarNavigate}
                        />
                    </div>
                </div>
            </>
        );
    }

您可能想通过创建一个临时新项目并仅测试此日历组件来再次检查。