reactjs - ロボットに動的リクエストを与える方法は?

Question

Robot という有限状態モジュールを見つけました。とても軽量でシンプルです。解決できないケースが 1 つあります。それは、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 コンソールに多くのデータが記録されます。複数回呼び出されたイベントのようです。ここで何ができますか？