@monaco-editor/react编辑器光标定位异常问题求助

先看你代码里的几个核心问题，直接导致了光标定位异常和内容自动加空白的情况：

问题根源 #

1. 未定义的file变量：代码里用了file.name和file.language，但只声明了fileName状态，根本没定义file对象，这会导致编辑器初始化时获取不到正确的路径和语言配置，引发渲染异常。
2. 未绑定value属性：MonacoEditor组件没有和外部的regoCode状态双向绑定，只靠onChange更新状态，会导致编辑器内部内容和外部状态不同步，进而出现光标错位、自动添加空白的问题。
3. 异步状态打印无效：handleEditorChange里的console.log(regoCode)打印的是旧值，因为React状态更新是异步的，这虽然不是核心问题，但属于不必要的错误。

修复后的代码 #

import React, { useState, Dispatch, SetStateAction } from "react";
import { default as MonacoEditor } from "@monaco-editor/react";
import * as monaco from "monaco-editor";

type Dispatcher<S> = Dispatch<SetStateAction<S>>;

const MONACO_OPTIONS: monaco.editor.IEditorConstructionOptions = {
  autoIndent: "full",
  automaticLayout: true,
  contextmenu: true,
  fontFamily: "monospace",
  fontSize: 13,
  lineHeight: 24,
  hideCursorInOverviewRuler: true,
  matchBrackets: "always",
  minimap: {
    enabled: false,
  },
  readOnly: false,
  scrollbar: {
    horizontalSliderSize: 4,
    verticalSliderSize: 18,
  },
};

interface propsDo {
  regoCode: string | undefined,
  setRegoCode: Dispatcher<string | undefined>
}

export const Editor = ({ regoCode, setRegoCode }: propsDo) => {
  // 修正：使用定义好的fileName状态，替换未定义的file
  const [fileName, setFileName] = useState("script.rego");

  const handleEditorChange = (
    value?: string,
    event?: monaco.editor.IModelContentChangedEvent
  ) => {
    setRegoCode(value);
    // 修正：直接打印最新的value参数，而非旧状态
    console.log(value);
  };

  return (
    <>
      <MonacoEditor
        height="70vh"
        width="70vw"
        theme="vs-dark"
        // 修正：使用已定义的fileName
        path={fileName}
        // 修正：明确指定语言（根据你的regoCode命名，这里设为rego）
        defaultLanguage="rego"
        options={MONACO_OPTIONS}
        onChange={handleEditorChange}
        // 关键：添加value绑定，确保编辑器内容与外部状态同步
        value={regoCode}
      />
    </>
  );
};

关键修复点说明 #

• 绑定value属性：这是解决光标错位的核心，让编辑器内容完全由外部regoCode状态控制，确保双向同步，避免内部状态和外部状态不一致导致的光标异常。
• 修复未定义变量：把file.name和file.language替换为已定义的fileName和明确的语言类型（比如"rego"，匹配你的regoCode命名）。
• 修正状态打印：直接打印onChange的value参数，获取最新的编辑器内容。

另外，检查父组件传入的regoCode初始值是否带有多余空白字符，如果有的话也会导致开头出现空白，确保初始值为""或你需要的内容即可。

内容的提问来源于stack exchange，提问作者Veera Silamban