Question

editorDidMount 方法的编辑器实例中缺少 getAction - monaco 编辑器

2021-08-11

956

javascript reactjs monaco-editor

问题我正在尝试使用 react-monaco-editor 来呈现 json 代码。当我尝试格式化 json 时，我被建议使用方法： editor.getAction('editor.action.formatDocument').run() 。我使用的代码是

const editorDidMount = (editor, monaco) => {
    setTimeout(() => {
      console.log(editor);
      editor.getAction('editor.action.formatDocument').run()
    }, 300);
  };

但我收到以下错误： Uncaught TypeError：无法读取 null 的属性“run” 有人能帮我理解为什么我在编辑器实例中缺少 getAction 方法吗？

我注意到的另一件事是，在上下文菜单（右键单击）中检查时..我没有看到 格式化文档 。此外，编辑器实例的 _actions 对象中缺少操作 editor.action.formatDocument 。任何帮助都非常感谢。

Answer 1

我遇到了同样的问题，当您过早卸载 MonacoEditor 组件时会发生这种情况。让我们看看我的用例。

组件是有条件渲染的，所以我用状态来处理这个问题。当状态变化速度超过 300 毫秒（或任何值）时，将执行超时逻辑，但找不到编辑器实例，因为组件已卸载，从而导致错误。

const monacoRef = useRef(null);
const [isInactive, setIsInactive] = useState(true);

function editorDidMount(editor) {
  monacoRef.current = editor;
  setTimeout(() => {
      monacoRef.current.getAction('editor.action.formatDocument').run();
  }, 300); // Increase this value to test the behavior
}

{!isInactive ? (
    <MonacoEditor onMount={handleMonacoDidMount} />
  ) : (
  <p>other component</p>
)}

要解决此问题，您可以使用 useEffect 钩子在卸载组件时清理编辑器实例。还要在超时逻辑中添加额外的验证，以检查编辑器实例是否可用。

const monacoRef = useRef(null);
const [isInactive, setIsInactive] = useState(true);

// --------- Add this code the clear the reference ----------
useEffect(() => {
  monacoRef.current = null;
}, [isInactive]);

function editorDidMount(editor) {
  monacoRef.current = editor;
  setTimeout(() => {
    if (monacoRef.current) {
      console.log(monacoRef.current, '<<<'); // Here you can see the editor instance with the right actions ready to use
      monacoRef.current.getAction('editor.action.formatDocument').run();
    }
  }, 300); 
}

Answer 2

这似乎是我自己造成的问题。我不得不在 monaco-editor-webpack-plugin ( https://github.com/microsoft/monaco-editor-webpack-plugin ) 的 features 列表中添加选项 format 。但有一个缺点是我仍然找不到 editor.getAction() 方法。相反，我不得不使用 editor.trigger() 方法通过代码模拟格式化操作。