React中XState同步转异步后无法触发异步函数问题排查

原同步可运行代码 #

const getItems = () => {
    return [{
        name: "test item"
    }];
};
export const simpleMachine = createMachine({
  id: 'simple',
  context: {
    items: []
  },
  on: {
    GET: {
      actions: assign({
        items: () =>{
          return getItems();
        }
      })
    },
});

修改后的异步实现代码 #

const getItems = async () => {
    return [{
        name: "test item"
    }];
};

export const simpleMachine = setup({
    actors: {
        getItems
    }
}).createMachine({
    id: 'simple',
    initial: 'idle',
    context: {
        items: []
    },
    states: {
        idle: {
            entry: () =>{
                console.log("Entering")
            },
            on: {
                GET: 'loading'
            }
        },
        loading: {
            invoke:{
                src: 'getItems',
                onDone: {
                    target: "idle",
                    actions: assign({
                        output: (_, event) => event.data,
                    })
                },
                onError: {
                    target: 'idle',
                    actions: assign({
                        items: () => []
                    })
                }
            }
        }
    }
});

调用代码 #

useEffect(() => {
        send({ type: 'GET' });
    }, [send]);

问题现象 #

修改后的异步代码中，getItems断点从未触发，items也未更新到context中。已确认能进入idle状态（entry日志正常输出），但无法切换到loading状态。

1. 语法错误导致状态机解析失败 #

你提供的异步状态机代码存在语法不完整的问题：loading状态的invoke定义未闭合，states对象也缺少闭合括号。语法错误会直接导致状态机无法正确初始化，自然无法触发状态切换。

2. 数据赋值目标错误 #

onDone的action中，你将异步返回的数据赋值给了context.output，但原context的目标字段是items，这会导致数据无法更新到预期位置。

3. 版本API兼容性检查 #

setup语法是XState v5的特性，若你使用的是v4版本，需改用v4的invoke写法：

// XState v4 兼容写法
loading: {
  invoke: {
    src: () => getItems(),
    onDone: {
      target: 'idle',
      actions: assign({
        items: (_, event) => event.data
      })
    },
    onError: {
      target: 'idle',
      actions: assign({
        items: []
      })
    }
  }
}

修复后的完整异步代码（XState v5） #

import { setup, assign } from 'xstate';

const getItems = async () => {
    return [{
        name: "test item"
    }];
};

export const simpleMachine = setup({
    actors: {
        getItems
    }
}).createMachine({
    id: 'simple',
    initial: 'idle',
    context: {
        items: []
    },
    states: {
        idle: {
            entry: () => {
                console.log("Entering idle");
            },
            on: {
                GET: 'loading'
            }
        },
        loading: {
            invoke: {
                src: 'getItems',
                onDone: {
                    target: "idle",
                    actions: assign({
                        items: (_, event) => event.data,
                    })
                },
                onError: {
                    target: 'idle',
                    actions: assign({
                        items: () => []
                    })
                }
            }
        }
    }
});

额外检查项 #

• 确保组件中正确使用useMachine钩子创建服务：

import { useMachine } from '@xstate/react';
import { simpleMachine } from './your-machine-file';

function YourComponent() {
  const [state, send] = useMachine(simpleMachine);

  useEffect(() => {
    send({ type: 'GET' });
  }, [send]);

  // 渲染逻辑
}

• 检查浏览器控制台是否有语法报错，这类错误是状态机失效的常见原因。

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