如果您发送React Xstate中不存在的事件会怎样?

时间:2019-11-17 19:55:58

标签: reactjs state state-management xstate

使用此有限状态机:

{
  initial: "foo",
  states: {
    foo: {
      on: { BAR: "bar" }
    },
    bar: {
      on: { FOO: "foo" }
    }
  }
}

在我的组件中,我这样做:

import { useMachine } from "@xstate/react";

export default function() {
  const [current, send] = useMachine(machine);

  useEffect(() => {
    send("BAR");
  }, []);

  return (
    <>
      Hello World  
    </>
  );
}

这是完全有效的代码,机器将切换到“ bar”状态。现在,如果我这样做会发生什么?

useEffect(() => {
  send("QUX");
}, []);

QUX事件未在计算机中定义。

2 个答案:

答案 0 :(得分:1)

在这种情况下,状态机解释器应该忽略计划外事件。这就是状态机的工作方式。如果找不到事件,则不会进行任何过渡评估。

根据状态机definition

状态机是状态的有限集合,由于事件的缘故,它们可以确定性地相互迁移。

计划中的事件导致计划中的过渡(如果守卫通过了)。

请注意,如果您处于foo状态,但是事件"QUX"是在状态层次结构中定义的较高的,解释器会找到它并评估在那里定义的转换。

在分层计算机中,根据树中的深度确定转换的优先级;更深层次的过渡更加具体,因此具有更高的优先级。这类似于DOM事件的工作方式:如果单击按钮,则直接在按钮上的单击事件处理程序比在窗口上的单击事件处理程序更具体。

here的Xstate文档的“转换”一章中可以找到有关这种情况的更多信息。

答案 1 :(得分:0)

如果未启用严格模式(默认情况下未启用),则“ StateNode”将根据事件尝试转换为适当的候选状态,什么也找不到,什么也不做。

Here is a link到确定是否出错的代码以及一小段代码:

if (this.strict) {
  if (!this.events.includes(_event.name) && !isBuiltInEvent(_event.name)) {
    throw new Error(
      `Machine '${this.id}' does not accept event '${_event.name}'`
    );
  }
}