React Native调用类方法报Render Error，访问属性却正常？

核心原因 #

你遇到的问题本质是Zustand状态库会将存储的类实例转换为普通JavaScript对象，导致类原型上的getStartDateTime方法丢失。

TypeScript没有报错是因为你声明了events: CalendarEventItem[]，但实际从store取出的是被扁平化的普通对象——它拥有startTime等属性，但没有类实例的方法。直接访问event.startTime正常是因为属性还在，而调用方法时自然会提示“不是函数”。

解决办法 #

方案1：将普通对象重新转为类实例 #

在从store获取数据后，把每个普通对象重新实例化为CalendarEventItem：

const Component = () => {
  const rawEvents = useCalendarStore((state) => state.events);
  // 转换为类实例
  const events: CalendarEventItem[] = rawEvents.map(event => new CalendarEventItem(event));

  // ... 其余代码不变
}

注意要确保CalendarEventItem的构造函数能正确接收普通对象参数并初始化属性。

方案2：改用接口+纯函数替代类方法（更推荐） #

React/TypeScript生态更偏向函数式编程，用类来定义数据模型容易遇到这类状态序列化问题。建议把类改成接口，用独立函数替代实例方法：

// CalendarEvent.ts
export interface CalendarEventItem {
  id: string;
  startTime: Date; // 后续重构为number
  // 其他属性...
}

// 用纯函数替代实例方法
export const getStartDateTime = (event: CalendarEventItem): Date => {
  return new Date(event.startTime); // 后续重构时改成 new Date(event.startTime) 即可
}

然后在组件中调用：

import { CalendarEventItem, getStartDateTime } from './CalendarEvent';

// ...
top: calculatePositionOffset(getStartDateTime(event), 3, 30),
// ...

这种方式完全避开了类实例序列化的问题，也更符合React的编程范式。

方案3：禁用Zustand的状态序列化（不推荐） #

Zustand默认会对状态进行序列化处理，你可以配置跳过，但这会导致状态无法被持久化（比如用persist中间件时），也不符合状态应该是可序列化纯对象的最佳实践：

// 创建store时配置
const useCalendarStore = create<CalendarStore>(
  persist(
    (set, get) => ({
      events: [],
      // ...
    }),
    {
      name: 'calendar-store',
      // 跳过序列化，保留类实例
      serialize: (state) => JSON.stringify(state),
      deserialize: (str) => {
        const state = JSON.parse(str);
        // 这里还是需要把events转成类实例，否则刷新后还是会丢失方法
        state.events = state.events.map(e => new CalendarEventItem(e));
        return state;
      },
    }
  )
);

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