Full Calendar因datesSet中setState引发无限循环，如何实现按月更新事件？

核心原因 #

直接在组件渲染逻辑里调用API更新events，会导致组件每次渲染都重新触发API请求，进而再次更新events引发循环；或是依赖项配置错误，导致钩子重复执行。

具体解决方法 #

1. 利用Full Calendar内置的日期范围回调（推荐） #

Full Calendar自带datesSet回调，当用户切换月份（或日期范围变化）时自动触发，直接在这里调用API获取对应月份的事件，再更新到日历：

// React环境下的示例代码
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

function MyCalendar() {
  const [events, setEvents] = useState([]);

  const handleDatesSet = async (info) => {
    // 提取当前视图的年月
    const targetYear = info.start.getFullYear();
    const targetMonth = info.start.getMonth() + 1; // 月份从0开始，API通常用1-12
    
    // 调用API获取对应月份的事件
    const response = await fetch(`/api/events?year=${targetYear}&month=${targetMonth}`);
    const newEvents = await response.json();
    
    // 更新事件，仅在切换月份时执行，不会触发无限循环
    setEvents(newEvents);
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={events}
      datesSet={handleDatesSet}
    />
  );
}

2. 手动控制API请求的触发时机 #

如果不用内置回调，需要记录当前显示的月份，仅在月份真正变化时才发起请求：

function MyCalendar() {
  const [events, setEvents] = useState([]);
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1);

  const fetchEvents = async (year, month) => {
    // 月份未变化则跳过请求
    if (year === currentYear && month === currentMonth) return;
    
    const response = await fetch(`/api/events?year=${year}&month=${month}`);
    const newEvents = await response.json();
    
    setEvents(newEvents);
    setCurrentYear(year);
    setCurrentMonth(month);
  };

  // 仅在年月变化时触发请求
  useEffect(() => {
    fetchEvents(currentYear, currentMonth);
  }, [currentYear, currentMonth]);

  // 自定义月份切换按钮逻辑
  const handlePrevMonth = () => {
    if (currentMonth === 1) {
      setCurrentYear(currentYear - 1);
      setCurrentMonth(12);
    } else {
      setCurrentMonth(currentMonth - 1);
    }
  };

  const handleNextMonth = () => {
    if (currentMonth === 12) {
      setCurrentYear(currentYear + 1);
      setCurrentMonth(1);
    } else {
      setCurrentMonth(currentMonth + 1);
    }
  };

  return (
    <>
      <button onClick={handlePrevMonth}>上月</button>
      <button onClick={handleNextMonth}>下月</button>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        events={events}
        headerToolbar={false} // 禁用默认导航，使用自定义按钮
      />
    </>
  );
}

3. 禁止在渲染阶段直接传递动态事件 #

绝对不要在events属性里直接写函数调用（比如events={fetchEvents()}），这会导致每次组件渲染都执行函数，触发无限循环。必须先把事件存入状态，再传递给events。

关键注意点 #

• 永远不要在组件渲染阶段直接发起API请求，必须放在回调函数、useEffect（React）或对应生命周期钩子中，且严格控制依赖项。
• 优先使用Full Calendar内置的日期回调，它能精准捕捉日期范围变化，无需自己维护月份状态。

内容的提问来源于stack exchange，提问作者MUHAMMAD WAQAS AAMIR