SyncFusion React日程组件对接Firebase：编辑功能异常求助

问题根源 #

1. 操作时机错误：你当前在点击编辑按钮（打开弹窗阶段）就执行了更新逻辑，但实际应该是在编辑弹窗中修改内容并点击保存后，才触发Firebase数据更新。
2. 依赖类名判断不可靠：通过按钮类名区分操作的方式不稳定，组件类名可能随版本变更，且新增与编辑的保存按钮类名复用问题无法解决。

正确解决方案 #

使用Syncfusion Schedule内置的actionBegin事件，该事件会在新增、编辑等操作触发时触发，通过事件参数的requestType可以精准判断操作类型，无需依赖按钮类名。

修改后的完整代码 #

import React, { useEffect, useState } from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
import { Header } from '../components';
import database from '../firebase';
import { set, ref, onValue, update, push } from "firebase/database";

const Scheduler = () => {
  const [scheduleObj, setScheduleObj] = useState();
  const [scheduleData, setScheduleData] = useState([]);

  const onDragStart = (arg) => {
    arg.navigation.enable = true;
  };

  // 从Firebase拉取数据
  const fetchData = () => {
    onValue(ref(database, 'schedules/'), (snapshot) => {
      const data = snapshot.val();
      const newData = [];
      if (data) {
        // 保留Firebase的key，方便后续编辑更新
        Object.entries(data).forEach(([key, value]) => {
          newData.push({ ...value, firebaseKey: key });
        });
      }
      setScheduleData(newData);
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  // 处理新增/编辑操作
  const handleActionBegin = (args) => {
    // 新增事件
    if (args.requestType === 'Add') {
      // 使用Firebase push自动生成唯一ID，避免数组长度导致的并发问题
      const newEventRef = push(ref(database, 'schedules/'));
      set(newEventRef, {
        Subject: args.data[0].Subject,
        Location: args.data[0].Location,
        Description: args.data[0].Description,
        StartTime: args.data[0].StartTime.toString(),
        EndTime: args.data[0].EndTime.toString(),
        IsAllDay: args.data[0].IsAllDay,
      }).then(() => {
        console.log('新增日程成功');
      }).catch((error) => {
        console.log('新增日程失败:', error);
      });
    }

    // 编辑保存事件
    if (args.requestType === 'Save') {
      // 使用之前存储的firebaseKey更新数据
      const eventKey = args.data.firebaseKey;
      update(ref(database, `schedules/${eventKey}`), {
        Subject: args.data.Subject,
        Location: args.data.Location,
        Description: args.data.Description,
        StartTime: args.data.StartTime.toString(),
        EndTime: args.data.EndTime.toString(),
        IsAllDay: args.data.IsAllDay,
      }).then(() => {
        console.log('更新日程成功');
      }).catch((error) => {
        console.log('更新日程失败:', error);
      });
    }
  };

  return (
    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
      <Header category="App" title="Calendar" />
      <ScheduleComponent
        height="650px"
        ref={(schedule) => setScheduleObj(schedule)}
        selectedDate={new Date()}
        eventSettings={{ dataSource: scheduleData }}
        dragStart={onDragStart}
        actionBegin={handleActionBegin} // 替换popupClose为actionBegin
      >
        <ViewsDirective>
          { ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map((item) => <ViewDirective key={item} option={item} />)}
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
      </ScheduleComponent>
    </div>
  );
};

export default Scheduler;

关键修改说明 #

1. 替换事件：移除popupClose，改用actionBegin事件，该事件会在新增/编辑操作触发时精准执行。
2. 操作类型判断：通过args.requestType区分Add（新增）和Save（编辑）操作，无需依赖按钮类名。
3. Firebase ID优化：新增时使用push自动生成唯一ID，避免数组长度导致的并发冲突；拉取数据时保留Firebase的key，方便编辑时精准定位数据。
4. 无刷新更新：操作完成后无需刷新页面，Firebase的onValue监听会自动同步最新数据到本地state。

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