React-Big-Calendar前后按钮无法正确切换月份问题求助

你的问题出在没有通过date属性控制日历视图的当前日期。React-Big-Calendar中，当你自定义onNavigate回调时，组件会放弃内部日期管理，需要你手动将选中的日期通过date prop传递给Calendar，否则视图不会同步更新。

修复步骤： #

1. 修改状态存储为Date对象
   把日期状态从字符串改为存储原生Date对象，避免频繁格式转换的问题：

   const [currentDate, setCurrentDate] = useState(new Date());
   

2. 给Calendar组件添加date属性
   将状态中的currentDate绑定到Calendar的date prop，让视图跟随状态变化：

   <Calendar
     localizer={localizer}
     events={events}
     style={{ height: 580 }}
     onSelectEvent={openModal}
     onNavigate={handleCalendarNavigate}
     date={currentDate} // 新增这一行
   />
   

3. 调整handleCalendarNavigate逻辑
   直接使用回调传入的date对象更新状态，无需转字符串：

   const handleCalendarNavigate = (date) => {
     console.log("Month ----->>>", moment(date).format("MMMM YYYY"));
     setCurrentDate(date); // 直接设置Date对象
   };
   

4. 修正API请求的模板字符串错误
   你当前的fetch URL用了双引号，模板变量${todayDate}不会被解析，要改成反引号：

   fetch(`/api/activity-calender?filterCurrentMonth=${moment(currentDate).format("YYYY-MM-DD")}`)
   

5. 处理未定义的openModal函数
   代码中onSelectEvent={openModal}但没有定义这个函数，需要补充实现或者暂时注释掉，避免报错。

完整修正后的代码： #

"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";

export default function ComplianceCalender() {
  const [events, setEvents] = useState([]);
  const localizer = useMemo(() => momentLocalizer(moment), []);
  // 存储原生Date对象
  const [currentDate, setCurrentDate] = useState(new Date());

  useEffect(() => {
    // 格式化日期为YYYY-MM-DD格式用于API请求
    const formattedDate = moment(currentDate).format("YYYY-MM-DD");
    fetch(`/api/activity-calender?filterCurrentMonth=${formattedDate}`)
      .then((response) => response.json())
      .then((data) => {
        const mappedData = data.map((item) => ({
          id: item.id,
          title: item._count,
          start: item.executor_due_date,
          end: item.executor_due_date,
        }));
        setEvents(mappedData);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, [currentDate]);

  const handleCalendarNavigate = (date) => {
    console.log("Month ----->>>", moment(date).format("MMMM YYYY"));
    setCurrentDate(date);
  };

  // 补充openModal函数实现
  const openModal = (event) => {
    // 这里添加你的模态框逻辑
    console.log("Selected event:", event);
  };

  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}
            style={{ height: 580 }}
            onSelectEvent={openModal}
            onNavigate={handleCalendarNavigate}
            date={currentDate} // 绑定当前日期控制视图
          />
        </div>
      </div>
    </>
  );
}

为什么这样能解决问题？ #

当你使用onNavigate时，React-Big-Calendar会认为你要完全接管日期的管理逻辑，所以必须通过date prop明确告诉组件当前应该显示哪个日期的视图。之前的代码只更新了自己的状态，但没有把状态同步给Calendar组件，导致视图停留在初始日期。

内容的提问来源于stack exchange，提问作者Rohan Gupta