如何给机器人动态请求？

Question

我刚刚找到了一个名为 Robot 的有限状态模块。它非常轻巧且简单。我遇到了一个无法解决的情况，那就是在 Robot 内部创建一个对 API 的动态请求。我试过这个

robot.js

const context = () => ({
  data: [],
});

export const authRobot = (request) =>
  createMachine(
    {
      ready: state(transition(CLICK, 'loading')),
      loading: invoke(
        request,
        transition(
          'done',
          'success',
          reduce((ctx, evt) => ({ ...ctx, data: evt }))
        ),
        transition(
          'error',
          'error',
          reduce((ctx, ev) => ({ ...ctx, error: ev }))
        )
      ),
      success: state(immediate('ready')),
      error: state(immediate('ready')),
    },
    context
  );

我像这样在我的反应组件中使用它

// ...

export default function Login() {
  const [current, send] = useMachine(authRobot(UserAPI.getData));
  const { data } = current.context;

  function handleSubmit(e) {
    e.preventDefault();
    send(CLICK);
  }

  useEffect(() => {
    console.log(data);
    console.log(current);
    console.log(current.name);
  }, [data]);

// ...

当我单击按钮时发生了问题，我的 Web 控制台记录了许多数据。似乎该事件被多次调用。我可以在这里做什么？

Answer 1

我认为这里的问题是useMachine() 在通过不同的机器时会触发重新渲染。由于您在渲染函数中创建了一台新机器，因此 useMachine 每次都将其视为不同的机器。

我会在这个闭包之外创建你的机器。