问摩纳哥编辑器react电子在加载时被卡住

EN

import "devextreme/dist/css/dx.common.css";
import "devextreme/dist/css/dx.light.css";
import React, { useEffect, useRef, useState } from "react";
import TreeView from "devextreme-react/tree-view";
import Sortable from "devextreme-react/sortable";
import Editor, { monaco } from "@monaco-editor/react";

const path = require("path");

const electron = window.require("electron");
const { dialog } = electron.remote;
const appPath = electron.remote.app.getAppPath();

const dirTree = window.require("directory-tree");

const fs = window.require("fs");

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== "/" ? "/" + str : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, "/");
  return encodeURI("file://" + ensureFirstBackSlash(pathName));
}

monaco.config({
  paths: {
    vs: uriFromPath(path.join(appPath, "node_modules/monaco-editor/min/vs")),
  },
});

monaco.init().then((monacoInstance) => {});

function App() {
  const treeRef = useRef(null);

  const [currentFile, setCurrentFile] = useState(null);

  const [items, setItems] = useState([]);

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

  const options = {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: "line",
    automaticLayout: false,
  };

  const onDragChange = (e) => {};

  const onDragEnd = (e) => {};

  const selectFile = (e) => {
    const data = fs.readFileSync(e.itemData.path, "utf8");
    console.log(data);
    setCurrentFile(data);
  };

  const openFolder = () => {
    const directory = dialog.showOpenDialogSync(null, {
      properties: ["openDirectory"],
    });

    if (!directory) return;

    const files = dirTree(directory[0]);

    console.log(files);
    setItems([files]);

    console.log(directory);
  };

  return (
    <div style={{ height: "100%" }}>
      <Editor language="javascript" value={"123"} />
    </div>
  );
}

export default App;