FullCalendar后端Patch后无法更新及初始化渲染事件问题

问题1：后端Patch操作后日历事件无法重新渲染 #

原因分析 #

1. 数据更新未触发有效监听：如果后端Patch后仅修改selectedTemplates数组的内部元素，而非替换数组引用，即便watch配置了deep: true，FullCalendar也可能无法感知calendarOptions.events的变化——因为数组是引用类型，直接修改元素不会触发FullCalendar的自动刷新机制。
2. 事件更新方式不符合FullCalendar规范：直接赋值this.calendarOptions.events并非官方推荐的更新方式，FullCalendar需要通过专用API才能触发事件重渲染。

解决方案 #

• 强制更新数据引用：在后端Patch成功后，生成新的数组引用触发watch监听，比如使用扩展运算符或Array.from：

// Index.vue中Patch成功后的回调示例
async handlePatchSuccess(updatedTemplate) {
  this.selectedTemplates = this.selectedTemplates.map(item => 
    item.id === updatedTemplate.id ? updatedTemplate : item
  );
}

• 使用FullCalendar API更新事件：通过组件ref获取日历实例，调用官方API手动更新事件，替代直接修改calendarOptions.events：

// recurrence-map-mixin.js
watch: {
  templates: {
    handler(newTemplates) {
      const events = this.createEventsTemplates(newTemplates);
      // 假设组件中用ref="calendar"绑定了FullCalendar实例
      const calendar = this.$refs.calendar.getApi();
      calendar.removeAllEvents();
      calendar.addEventSource(events);
    },
    deep: true,
  },
},

问题2：mounted从localStorage读取数据时，内层forEach未执行 #

原因分析 #

从createEventsTemplates的判断逻辑if (!templateArray || !templateArray.length || typeof templateArray[0] !== 'object')可知，从localStorage取出的数据不满足执行条件：

1. 存储数据未正确序列化/反序列化：localStorage仅支持字符串存储，若存入时未用JSON.stringify，取出时未用JSON.parse，会导致templateArray是字符串而非数组，或数组元素不是对象类型。
2. 存储的结构与props数据不符：存入localStorage的selectedTemplates结构和template-grid传递的props不一致，比如templateArray不是数组、数组为空，或第一个元素不是对象。

解决方案 #

1. 确保localStorage数据正确解析：读取时必须用JSON.parse转换，存入时用JSON.stringify序列化：

// recurrence-map组件的mounted钩子
mounted() {
  const savedData = localStorage.getItem('selectedTemplates');
  if (savedData) {
    try {
      const parsedTemplates = JSON.parse(savedData);
      if (Array.isArray(parsedTemplates) && parsedTemplates.length > 0) {
        const events = this.createEventsTemplates(parsedTemplates);
        const calendar = this.$refs.calendar.getApi();
        calendar.addEventSource(events);
        this.selectedTemplates = parsedTemplates;
      }
    } catch (err) {
      console.error('解析localStorage模板数据失败:', err);
    }
  }
}

2. 增强createEventsTemplates的健壮性：优化类型判断逻辑，避免误判并输出错误日志：

createEventsTemplates(templates) {
  if (!Array.isArray(templates) || templates.length === 0) {
    return [];
  }
  console.log('first break point')
  let events = [];
  const daysOfWeek = [
    'time_monday',
    'time_tuesday',
    'time_wednesday',
    'time_thursday',
    'time_friday',
    'time_saturday',
    'time_sunday'];

  const dayIndexMap = {
    'time_sunday': 0,
    'time_monday': 1,
    'time_tuesday': 2,
    'time_wednesday': 3,
    'time_thursday': 4,
    'time_friday': 5,
    'time_saturday': 6
  };

  templates.forEach(templateArray => {
    console.log('second break point');
    // 更严谨的类型检查
    if (!Array.isArray(templateArray) || templateArray.length === 0) {
      console.warn('无效的templateArray结构:', templateArray);
      return;
    }
    const hasValidItems = templateArray.every(item => typeof item === 'object' && item !== null);
    if (!hasValidItems) {
      console.warn('templateArray包含非对象元素:', templateArray);
      return;
    }

    templateArray.forEach(template => {
      console.log('third break point');

      daysOfWeek.forEach((day) => {
        if (!template[day] || !Array.isArray(template[day]) || template[day].length === 0) {
          return;
        }

        const dayIndex = dayIndexMap[day];

        template[day].forEach(time => {
          console.log('forth break point');
          events.push({
            daysOfWeek: [dayIndex],
            startTime: time,
            endTime: this.calculateEndTime(time, template.duration_time || 60),
            color: template.color,
            data: template,
            title: template.name,
          });
        });
      });
    });
  });
  return events;
},

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