React传useSelector获取的时区到FullCalendar报moment.tz不是函数错误

开发者阿泽

2026-10-5

报错原因

核心触发点是组件首次渲染时，从Redux拿到的userTimezone为非法值：Redux状态初始化阶段state.settings.userTimezone大概率是undefined、空字符串、非IANA标准时区格式的无效值，momentTimezonePlugin接收到非法时区参数时，调用moment.tz方法就会抛出该错误。
手动写死时区字符串运行正常，是因为组件从首次渲染开始就拿到了合法的时区参数，不会进入异常执行分支。

解决方案

方案1：给Redux状态设置合法初始值

在Redux的settings切片的初始化逻辑中，给userTimezone设置默认合法值，比如'UTC'、'Asia/Shanghai'等标准IANA时区字符串，避免首次渲染拿到空值。

方案2：组件增加条件渲染逻辑

等userTimezone加载为合法值后再渲染FullCalendar组件，修改代码如下：

export default function Schedule(){
    const { userTimezone } = useSelector((state) => state.settings)
    // 校验时区值合法性，无效时展示加载态
    if (!userTimezone || typeof userTimezone !== 'string') return <div>加载中...</div>
    return (
    <div className="container-fluid">
      <FullCalendar
        nowIndicator
        timeZone={userTimezone}
        plugins={[timeGridPlugin, dayGridPlugin, interactionPlugin, momentTimezonePlugin]}
        initialView="timeGridWeek"
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        }}
        editable
        selectable
        selectMirror
        dayMaxEvents
        weekends
        locales={allLocales}
        events={currentevents}
      />
    </div>
  )
}