Outlook插件任务窗格同步会议起止时间问题求助

问题1：仅结束时间（endTime）能成功更新 #

你当前的代码里，start.getAsync 和 end.getAsync 是并行执行的异步操作，两个回调都基于闭包中的旧状态去更新meetingSchedule。假设end.getAsync的回调后执行，它会用初始的meetingSchedule对象更新endTime，直接覆盖掉之前start.getAsync对startTime的修改，最终只有后执行的那个更新生效。

解决方案：等两个异步请求都完成后，一次性更新状态，避免竞态条件：

Office.context.mailbox.item.addHandlerAsync(Office.EventType.AppointmentTimeChanged, async function (result) {
  const item = Office.context.mailbox.item;

  // 将getAsync包装为Promise统一管理
  const getStart = new Promise(resolve => {
    item.start.getAsync(result => resolve(result.value));
  });
  const getEnd = new Promise(resolve => {
    item.end.getAsync(result => resolve(result.value));
  });

  // 等待两个时间值都获取完成
  const [startValue, endValue] = await Promise.all([getStart, getEnd]);
  
  // 转换时间格式
  const updatedStartTime = await getMeetingTime(startValue);
  const updatedEndTime = await getMeetingTime(endValue);

  // 一次性合并更新状态
  setMeetingSchedule({
    ...meetingSchedule,
    startTime: updatedStartTime.toLocaleLowerCase(),
    endTime: updatedEndTime.toLocaleLowerCase()
  });
});

问题2：组件多次重渲染 #

如果useEffect里没有正确清理事件监听器，每次组件渲染都会重复添加AppointmentTimeChanged监听器，导致时间变化时触发多次回调，进而引发频繁重渲染。另外，依赖项设置不当也会导致监听器被重复注册。

解决方案：在useEffect中添加监听器，并在清理阶段移除，同时确保useEffect只执行一次：

useEffect(() => {
  let handlerId = null;

  // 添加事件监听器并保存handlerId
  Office.context.mailbox.item.addHandlerAsync(
    Office.EventType.AppointmentTimeChanged,
    async function (result) {
      const item = Office.context.mailbox.item;
      const getStart = new Promise(resolve => item.start.getAsync(r => resolve(r.value)));
      const getEnd = new Promise(resolve => item.end.getAsync(r => resolve(r.value)));
      const [startValue, endValue] = await Promise.all([getStart, getEnd]);
      
      const updatedStartTime = await getMeetingTime(startValue);
      const updatedEndTime = await getMeetingTime(endValue);
      
      // 使用函数式更新，确保基于最新状态修改
      setMeetingSchedule(prevState => ({
        ...prevState,
        startTime: updatedStartTime.toLocaleLowerCase(),
        endTime: updatedEndTime.toLocaleLowerCase()
      }));
    },
    (addResult) => {
      if (addResult.status === Office.AsyncResultStatus.Succeeded) {
        handlerId = addResult.value;
      }
    }
  );

  // 组件卸载或依赖更新时移除监听器
  return () => {
    if (handlerId) {
      Office.context.mailbox.item.removeHandlerAsync(
        Office.EventType.AppointmentTimeChanged,
        { handlerId: handlerId }
      );
    }
  };
}, []); // 空依赖数组确保监听器只注册一次

额外说明：用setMeetingSchedule(prevState => {...})的函数式更新方式，能确保每次状态修改都基于最新的前一次状态，彻底避免闭包导致的旧状态问题。

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