React集成mxGraph加载diagram.xml无显示且无报错问题

我正在开展一个mxGraph与React结合的项目，需要实现加载以XML格式保存的流程图功能，但加载后流程图无法显示，且页面检查无任何报错信息。最初使用mxGraph 1.0.1版本，现已升级至最新的4.2.2版本，以下是完整代码：

import React, { useRef, useEffect } from 'react';
import { mxGraph, mxRubberband, mxClient, mxUtils, mxCodec } from 'mxgraph-js';
import './DiagramEditor.css'; // 确保你的项目中有这个CSS文件

const DiagramModifier = () => {
    const graphContainer = useRef(null);
    const graph = useRef(null);

    useEffect(() => {
        if (!mxClient.isBrowserSupported()) {
            mxUtils.alert('当前浏览器不支持！');
            return;
        }

        // 在容器内初始化图形
        graph.current = new mxGraph(graphContainer.current);
        graph.current.setHtmlLabels(true);
        graph.current.setCellsEditable(true);
        graph.current.setCellsDeletable(true);
        graph.current.setCellsMovable(true);
        graph.current.setConnectable(true);
        graph.current.setCellsResizable(true);
        new mxRubberband(graph.current); // 启用框选功能

    }, []);

    const updateGraph = (action) => {
        const model = graph.current.getModel();
        model.beginUpdate();
        try {
            action();
        } finally {
            model.endUpdate();
        }
    };

    const addVertex = () => {
        updateGraph(() => {
            const parent = graph.current.getDefaultParent();
            graph.current.insertVertex(parent, null, '节点', 100, 100, 80, 30);
        });
    };

    const connectVertices = () => {
        const selectedCells = graph.current.getSelectionCells();
        if (selectedCells.length === 2) {
            updateGraph(() => {
                const parent = graph.current.getDefaultParent();
                graph.current.insertEdge(parent, null, '连接线', selectedCells[0], selectedCells[1]);
            });
        } else {
            alert('请选择恰好两个节点进行连接。');
        }
    };

    const deleteVertex = () => {
        const selected = graph.current.getSelectionCell();
        if (selected) {
            updateGraph(() => {
                graph.current.removeCells([selected]);
            });
        } else {
            alert('请选择要删除的节点。');
        }
    };

    const saveDiagram = () => {
        const encoder = new mxCodec();
        const result = encoder.encode(graph.current.getModel());
        const xml = mxUtils.getXml(result);
        const blob = new Blob([xml], { type: 'application/xml' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.setAttribute('href', url);
        link.setAttribute('download', 'diagram.xml');
        link.click();
    };

    const loadDiagram = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.xml';
        input.onchange = e => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = e => {
                    try {
                        const xml = e.target.result;
                        const doc = mxUtils.parseXml(xml);
                        const codec = new mxCodec(doc);
                        const model = graph.current.getModel();
                        model.beginUpdate();
                        try {
                            codec.decode(doc.documentElement, model);
                        } finally {
                            model.endUpdate();
                            graph.current.refresh(); 
                        }
                    } catch (err) {
                        console.error('加载流程图出错:', err);
                        alert('加载流程图失败。');
                    }
                };
                reader.readAsText(file);
            } else {
                alert('未选择文件。');
            }
        };
        input.click();
    };

    return (
        <div className="diagram-editor">
            <div ref={graphContainer} className="graph-container" />
            <div className="toolbar">
                <button onClick={addVertex}>添加节点</button>
                <button onClick={connectVertices}>连接节点</button>
                <button onClick={deleteVertex}>删除节点</button>
                <button onClick={saveDiagram}>保存流程图</button>
                <button onClick={loadDiagram}>加载流程图</button>
            </div>
        </div>
    );
};

export default DiagramModifier;

内容的提问来源于stack exchange，提问作者SEBASTIAN ANDRES CANDIA CABEZA