摩纳哥编辑器在重新加载后继续加载

Question

我目前正在尝试使用带有 React 的 Monaco Editor 来实现一个应用程序（我不知道这是否重要，但也使用 RemixJS），您可以在其中上传文件，其内容直接进入代码编辑器。不幸的是，当我尝试使用从文件上传的代码加载编辑器时，它只会永远显示“正在加载...”消息。当我在页面开头加载第一个编辑器时，它工作正常。到目前为止，这是我的代码：

<div className="tool__functionality__item" id="monaco__editor">
    <h3>Your YAML Code</h3>
    <Editor
        height="55vh"
        width="100%"
        theme="vs-dark"
        defaultLanguage="yaml"
        defaultValue="// Type your YAML code here"
    />
</div>

<input
    type="file"
    id="file-upload"
    accept=".yaml, .yml"
    className="tool__functionality__validate__upload"
    onChange={(e) => {
        var fr = new FileReader();
        fr.readAsText(e.target.files![0]);
        fr.onload = () => {
            let value = fr.result as string;
            document.getElementById("monaco__editor")!.innerHTML =
                ReactDOMServer.renderToString(
                    <Editor
                        height="55vh"
                        width="100%"
                        theme="vs-dark"
                        defaultLanguage="yaml"
                        defaultValue=value
                    />
                );
        };
    }}
></input>

不要犹豫，询问您可能需要的任何其他代码才能完全理解问题。

我试过为

value

属性放置一个静态有效的像“something”而不是

defaultValue

，但它只是不断加载