无法为 xstate 创建子状态

Posted 2023-02-19

【中文标题】无法为 xstate 创建子状态

【英文标题】：not able to create child states for xstate

【发布时间】：2020-09-02 04:14:48

【问题描述】：

我创建了this codesandbox 来突出问题。

我为反应钩子可中止提取创建了一个状态机。

我可以让它工作的唯一方法是让所有状态处于同一级别：

export interface AbortableSchema 
  states: 
    [AbortableStates.Idle]: ;
    [AbortableStates.Loading]: ;
    [AbortableStates.Succeded]: ;
    [AbortableStates.Error]: ;
    [AbortableStates.Aborted]: ;
  ;


export const createAbortableMachine = <D>(): StateMachine<
  AbortableState<D>,
  AbortableSchema,
  AbortableActions<D>
> => 
  const context: AbortableState<D> = 
    state: AbortableStates.Idle,
    data: undefined,
    error: undefined
  ;

  const abortableMachine = Machine<
    AbortableState<D>,
    AbortableSchema,
    AbortableActions<D>
  >(
    id: "fetchable",
    initial: AbortableStates.Idle,
    context,
    states: 
      [AbortableStates.Idle]: 
        on:  START: AbortableStates.Loading 
      ,
      [AbortableStates.Loading]: 
        on: 
          [AbortableActionTypes.Success]: 
            target: AbortableStates.Succeded,
            actions: (context, event) => 
              context.data =  ...event.payload ;
            
          ,
          [AbortableActionTypes.Error]: 
            target: [AbortableStates.Error],
            actions: (context, event) => 
              context.error =  ...event.error ;
            
          ,
          [AbortableActionTypes.Abort]: 
            target: [AbortableStates.Aborted]
          
        
      ,
      [AbortableStates.Succeded]: 
        on: 
          [AbortableActionTypes.Reset]: 
            target: AbortableStates.Idle,
            actions: (_context, event) => 
              _context = context;
              return _context;
            
          
        
      ,
      [AbortableStates.Error]: 
        on: 
          [AbortableActionTypes.Reset]: 
            target: AbortableStates.Idle,
            actions: (_context, event) => 
              _context = context;
              return _context;
            
          
        
      ,
      [AbortableStates.Aborted]: 
        on: 
          [AbortableActionTypes.Reset]: 
            target: AbortableStates.Idle,
            actions: (_context, event) => 
              _context = context;
              return _context;
            
          
        
      
    
  );

  return abortableMachine;
;

但对我来说，嵌套这样的状态更有意义：

export interface AbortableSchema 
  states: 
    [AbortableStates.Idle]: ;
    [AbortableStates.Loading]: 
      states: 
        [AbortableStates.Succeded]: ;
        [AbortableStates.Error]: ;
        [AbortableStates.Aborted]: ;
      ;
    ;
  ;


export const createAbortableMachine = <D>(): StateMachine<
  AbortableState<D>,
  AbortableSchema,
  AbortableActions<D>
> => 
  const context: AbortableState<D> = 
    state: AbortableStates.Idle,
    data: undefined,
    error: undefined
  ;

  const abortableMachine = Machine<
    AbortableState<D>,
    AbortableSchema,
    AbortableActions<D>
  >(
    id: "fetchable",
    initial: AbortableStates.Idle,
    context,
    states: 
      [AbortableStates.Idle]: 
        on:  START: AbortableStates.Loading 
      ,
      [AbortableStates.Loading]: 
        on: 
          [AbortableActionTypes.Success]: 
            target: AbortableStates.Succeded,
            actions: (context, event) => 
              context.data =  ...event.payload ;
            
          ,
          [AbortableActionTypes.Error]: 
            target: [AbortableStates.Error],
            actions: (context, event) => 
              context.error =  ...event.error ;
            
          ,
          [AbortableActionTypes.Abort]: 
            target: [AbortableStates.Aborted]
          
        ,
        states: 
          [AbortableStates.Succeded]: 
            on: 
              [AbortableActionTypes.Reset]: 
                target: AbortableStates.Idle,
                actions: (_context, event) => 
                  _context = context;
                  return _context;
                
              
            
          ,
          [AbortableStates.Error]: 
            on: 
              [AbortableActionTypes.Reset]: 
                target: AbortableStates.Idle,
                actions: (_context, event) => 
                  _context = context;
                  return _context;
                
              
            
          ,
          [AbortableStates.Aborted]: 
            on: 
              [AbortableActionTypes.Reset]: 
                target: AbortableStates.Idle,
                actions: (_context, event) => 
                  _context = context;
                  return _context;
                
              
            
          
        
      
    
  );

  return abortableMachine;
;

加载有子状态，但如果我这样做，我会收到以下错误消息：

状态节点“fetchable.loading”的转换定义无效： “可获取”上不存在子状态“成功”

【参考方案1】：

当您使用州名时，它们不是绝对的；他们是兄弟姐妹的亲戚。例如，如果您将"success" 作为***定义的状态，那么您只能在该状态的同级中引用该确切字符串；不是兄弟姐妹的孩子。然后，你必须通过 ID 来引用它。