React XState v5中如何监听onDone事件？

在XState v5中，useMachine返回的ActorRef不再提供onDone方法，你可以通过以下两种方式实现最终状态的监听：

方式一：React惯用的状态监听法 #

通过useMachine获取状态，结合useEffect监听状态变化，判断是否进入最终状态后执行逻辑：

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

// 假设你的状态机包含名为completed的最终状态
const fsm = createMachine({
  states: {
    // ...其他业务状态
    completed: { type: 'final' }
  }
});

function YourComponent(props) {
  const [state] = useMachine(fsm);

  useEffect(() => {
    // 两种判断最终状态的方式：
    // 1. 判断状态是否为done状态（适用于任何最终状态）
    if (state.status === 'done') {
      props.submit(state.context);
    }
    // 2. 匹配具体的最终状态节点
    // if (state.matches('completed')) {
    //   props.submit(state.context);
    // }
  }, [state, props.submit]);

  // ...组件其他逻辑
}

这种方式完全贴合React的状态监听习惯，适合需要在组件层面灵活处理最终状态逻辑的场景。

方式二：将动作内聚到状态机中 #

按照XState的设计理念，把最终状态的处理逻辑直接定义在状态机内部，通过输入参数注入组件的方法：

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

const fsm = createMachine({
  schema: {
    // 定义输入参数类型，确保类型安全
    input: {} as { submit: (context: YourContextType) => void }
  },
  states: {
    // ...其他业务状态
    completed: {
      type: 'final',
      // 进入最终状态时执行提交逻辑
      entry: ({ input, context }) => {
        input.submit(context);
      }
    }
  }
});

function YourComponent(props) {
  const [state] = useMachine(fsm, {
    // 将组件的submit方法作为输入传入状态机
    input: { submit: props.submit }
  });

  // ...组件其他逻辑
}

这种方式把状态与对应的动作逻辑内聚，更符合状态机的设计原则，适合逻辑与状态强绑定的场景。

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