React FullCalendar报错：Cannot read properties of null (reading 'getUTCFullYear')

错误原因 #

出现Cannot read properties of null (reading 'getUTCFullYear')是因为FullCalendar的initialDate接收到了无效值（初始为空字符串），导致内部解析日期时得到null，进而调用日期方法时报错。同时你的日期获取逻辑也存在可优化的点。

具体修复步骤 #

1. 修正初始状态值
   把dateEvent的初始值从空字符串改为一个有效的ISO格式日期，避免日历初始化时拿到无效值：

const [dateEvent, setDateEvent] = useState("2023-08-13T08:00:00");

2. 优化日期获取函数
   用find替代filter（因为你只需要匹配单个eventId的事件），同时增加找不到对应事件的兜底处理：

function getStartDate() {
  const matchedEvent = INITIAL_EVENTS.find(obj => obj.eventId === eventId);
  if (matchedEvent) {
    setDateEvent(matchedEvent.startEvent);
  } else {
    // 找不到对应eventId时设置默认日期
    setDateEvent("2023-08-13T08:00:00");
  }
}

3. 确保eventId变化时触发日期更新
   通过useEffect钩子监听eventId的变化，自动调用getStartDate更新日历初始日期：

import { useEffect } from 'react';

// ...其他代码

useEffect(() => {
  if (eventId) {
    getStartDate();
  }
}, [eventId]);

4. 可选：增强日期格式兼容性
   如果担心字符串解析问题，可以把dateEvent转为Date对象再传给FullCalendar：

<FullCalendar
  // ...其他属性
  initialDate={new Date(dateEvent)}
  // ...其他属性
/>

额外说明 #

• filter会遍历整个数组返回所有匹配项，而find找到第一个匹配项就停止，更适合你的场景（eventId应为唯一值）。
• 必须保证eventId传入组件时是有效的，否则getStartDate会触发兜底逻辑。

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