Xstate v4迁移至v5遇TypeError及invoke函数未执行问题求助

核心问题：依赖版本不兼容 #

你的@xstate/react是v4版本，而xstate是v5版本，两者API不兼容，这是导致TypeError: Cannot read properties of undefined (reading 'getSnapshot')的根本原因。v4的React绑定无法正确处理v5的状态机实例。

修复步骤1：同步依赖版本 #

修改package.json中的依赖，确保@xstate/react和xstate版本一致：

"dependencies": {
  "@xstate/react": "^5.1.0",
  "xstate": "^5.1.0"
}

执行依赖安装命令更新：

npm install
# 或
yarn install

修复Invoke未触发及服务日志不显示问题 #

检查状态图中的Invoke语法 #

XState v5中，invoke要求使用完整对象结构，不再支持v4的简写形式。确保checkUserStateChart中的invoke定义符合v5规范：

// 示例：checkUserStateChart中的正确invoke写法
const checkUserStateChart = ({ target }) => ({
  invoke: {
    src: 'getLoginState', // 对应useMachine options中services的key
    onDone: {
      target: target || 'someTargetState'
    },
    onError: {
      target: 'errorState' // 根据业务需求定义错误处理状态
    }
  }
});

调整useMachine的参数结构 #

v5中useMachine的options结构基本兼容，但需确保上下文传递正确。如果useSharedContext返回动态上下文，建议动态创建状态机以注入初始上下文：

import { createMachine } from 'xstate';
import { useMachine } from '@xstate/react';

// 改为动态创建机器，接收初始上下文参数
const createComMachine = (initialContext) => createMachine({
  id: 'com',
  initial: 'checkLoginState',
  context: initialContext,
  states: {
    [STATES.CHECK_LOGIN_STATE]: {
      ...checkUserStateChart({ target: '' }),
    },
  },
});

const useComRegistrationMachine = (siteDefinition: SiteDefinitionTypes) => {
  const initialContext = useSharedContext(siteDefinition);
  const comMachine = createComMachine(initialContext);

  return useMachine(comMachine, {
    actions: {
      FORWARD_TO_HOMEPAGE: () => {
        console.log('FORWARD_TO_HOMEPAGE========');
        if (typeof window === 'object') {
          window.location.href = '/';
        }
      },
    },
    services: {
      getLoginState: async (ctx: ContextTypes) => {
        console.log('Service GET_LOGIN_STATE invoked======', ctx);
        try {
          const result = await ctx.queryClient.ensureQueryData({
            queryKey: QUERY_KEYS.GET_LOGIN_STATE,
            queryFn: getLoginState,
          });
          return result;
        } catch (error) {
          console.error('Error in GET_LOGIN_STATE', error);
          throw error;
        }
      },
    },
  });
};

export default useComRegistrationMachine;

验证状态机初始化 #

可以在初始状态添加entry动作，确认状态机是否正确进入目标状态：

states: {
  [STATES.CHECK_LOGIN_STATE]: {
    entry: () => console.log('Entered checkLoginState'),
    ...checkUserStateChart({ target: '' }),
  },
}

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