React从对象数组取值更新useState适配FullCalendar出现异常

问题场景 #

我用FullCalendar搭建简易日历，需要把appointment数组中的service（服务名）和date（日期）提取出来，转换成FullCalendar要求的事件格式，存入useState定义的events状态里，供组件的events属性使用。

示例数据：

const appointment = [
  { service: "Grooming", date: "2022-11-23", name: "Josh" },
  { service: "Vaccine", date: "2022-11-22", name: "Aaron" }
];

错误实现及问题 #

我之前的代码写法导致控制台出现4个未识别对象：

const [events, setEvents] = useState([]);
useEffect(() => {
  setEvents(prev =>[ ...prev, {start: appointment.date, title: appointment.service} ])
  console.log(events)
}, []);

FullCalendar组件配置：

<div className="App">
  <FullCalendar 
    ref={calendarRef} 
    plugins={[dayGridPlugin]}
    initialView="dayGridMonth"
    events={events}
  />
</div>

错误原因 #

• 数组访问错误：appointment是数组，直接访问appointment.date/appointment.service会返回undefined，生成无效的事件对象
• 未遍历数组：没有循环处理数组中的每个项，而是试图直接把数组当作单个对象转换，导致错误的对象被添加
• 异步状态打印问题：console.log(events)是同步执行，此时events还没完成更新，无法看到正确结果

修复代码 #

正确的做法是遍历appointment数组，逐个转换为FullCalendar支持的事件格式：

const [events, setEvents] = useState([]);

// 转换并更新事件
useEffect(() => {
  const convertedEvents = appointment.map(item => ({
    start: item.date, // FullCalendar需要的日期字段
    title: item.service // FullCalendar需要的标题字段
  }));
  setEvents(convertedEvents);
}, [appointment]); // 依赖appointment，数组变化时自动重新转换

// 查看更新后的事件（可选）
useEffect(() => {
  console.log("更新后的events:", events);
}, [events]);

FullCalendar的组件配置保持不变即可，修复后组件能正确识别所有事件，不会再出现未识别对象的报错。

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