javascript - useEffect の反応コンポーネントで xstate マシンの状態を設定する方法はありますか?

Question

以下を必要とする次の React.js コンポーネントがあります。

• fetch を使用してサーバー側 API を呼び出してボタンをクリックしたときの状態を保持します。
• コンポーネントが初期化されると、useEffectfetch を使用してサーバー側 API を呼び出し、オブジェクトの現在の状態を取得する呼び出し後にコンポーネントに状態が設定されます。

コンポーネントの表示はこちら

---

---

これが私がこれまでに持っているものです。

import React, { useEffect, useState } from 'react';
import { useParams, useHistory } from "react-router-dom";
import { createMachine } from 'xstate';
import { useMachine } from "@xstate/react";
import {MagellanButton} from "./Styles";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../App.css';

const approvalMachine = createMachine({
    id: 'approve',
    initial: 'Not Submitted',
    context: {
        retries: 0
    },
    states: {
        'Not Submitted': {
            on: {
                SUBMIT: 'Pending Approval'
            }
        },
        'Pending Approval': {
            on: {
                CANCEL: 'Not Submitted',
                CHANGE: 'Change Request',
                DENIED: 'Denied',
                APPROVED: 'Approved'
            }
        },
        'Change Request': {
            on: {
                RESUBMITTED: 'Pending Approval',
                CANCEL: 'Not Submitted'
            }
        },
        Denied: {
            type: 'final'
        },
        Approved: {
            on: {
                PUBLISH: 'Published'
            }
        },
        Published: {
            type: "final"
        }
    }
});

function MagellanStateManager({id}) {
    const parameters = useParams();
    const history = useHistory()
    const [state, send] = useMachine(approvalMachine);

    useEffect(() => {
    }, []);

    return (
        <span style={{float: "right", marginTop: 8}}>
            <span className="m-form-label  ml-3">State:</span> <span>{state.value}</span>
            <MagellanButton className="ml-3" disabled={!state.nextEvents.includes('SUBMIT')} onClick={() => send('SUBMIT')}>Submit</MagellanButton>
            <MagellanButton className="ml-3" disabled={!state.nextEvents.includes('CANCEL')} onClick={() => send('CANCEL')}>Cancel</MagellanButton>
            <MagellanButton className="ml-3" disabled={!state.nextEvents.includes('CHANGE')} onClick={() => send('CHANGE')}>Change</MagellanButton>
            <MagellanButton className="ml-3" disabled={!state.nextEvents.includes('RESUBMITTED')} onClick={() => send('RESUBMITTED')}>Resubmit</MagellanButton>
            <MagellanButton className="ml-3" disabled={!state.nextEvents.includes('DENIED')} onClick={() => send('DENIED')}>Deny</MagellanButton>
            <MagellanButton className="ml-3" disabled={!state.nextEvents.includes('APPROVED')} onClick={() => send('APPROVED')}>Approve</MagellanButton>
            <MagellanButton className="ml-3" disabled={!state.nextEvents.includes('PUBLISH')} onClick={() => send('PUBLISH')}>Publish</MagellanButton>
        </span>
    )

}

export default MagellanStateManager;