无法为xstate创建子状态。

Question

我创建了这个密码箱来突出这个问题。

我已经创建了一个状态机，用于react可中止的提取。

我唯一能让它发挥作用的方法就是让所有的州都在同一个层次上：

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;
};

Loading具有子状态，但如果这样做，则会收到以下错误消息：

状态节点的无效的转换定义。加载:子状态“已成功”不存在于“可取”上

Answer 1

当您使用状态名称时，它们不是绝对的；它们是相对于同级的。例如，如果将"success"定义为在顶层定义的状态，则只能在同级的同级引用确切的字符串，而不能引用同级的子字符串。那么，您必须通过ID来引用它。