如何将publicHolidays数组添加到events数组？React代码运行仅显示listLeave数据

问题原因 #

• useMemo返回的events是缓存的计算值，只要依赖项leavesListStatus发生变化，就会重新生成仅包含请假列表数据的新数组，你在useEffect中push进去的节假日数据会被直接覆盖
• 你直接修改events数组不会触发组件重新渲染，哪怕push操作执行成功，视图也不会拿到更新后的数据，因为events不是React的响应式状态
• 代码细节问题：你使用map遍历publicHolidays仅执行push操作属于误用，map的设计目标是返回新数组，仅遍历执行副作用应该用forEach

修复方案 #

最优方案是直接将节假日相关的状态也加入useMemo的依赖项，一次性计算得到完整的events数组，完全不需要额外的useEffect：

const events = useMemo(() => {
  // 生成请假事件列表
  const leaveEvents = leavesListData.list.map(({ id, absenceTypeName, approvalStatusCd, startDate, endDate }) => {
    return {
      key: id,
      title: absenceTypeName,
      start: startDate,
      end: endDate,
      status: getLeaveStatusColor(approvalStatusCd),
      isPublicHoliday: false,
    };
  });
  // 节假日加载完成后拼接节假日事件
  if (statusPublicHolidays === RequestStatus.resolved && publicHolidays) {
    const holidayEvents = publicHolidays.map((event) => ({
      key: Number(event.eventId),
      title: event.name,
      start: event.startDate.toString(),
      end: event.endDate.toString(),
      isPublicHoliday: true,
      status: 'gray',
    }));
    return [...leaveEvents, ...holidayEvents];
  }
  return leaveEvents;
// 新增相关依赖项
}, [leavesListStatus, statusPublicHolidays, publicHolidays]);

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