使用react-codemirror2 Controlled组件出现双编辑器且输入同步问题

以下是几种可能的原因和对应的解决办法：

• 样式重复引入或冲突
  检查项目中是否重复引入了Codemirror的CSS文件（比如全局样式或其他组件里又加了codemirror/lib/codemirror.css），重复的样式可能让单个编辑器看起来像两个。确保核心CSS和主题CSS只在项目中引入一次。

• 组件被重复调用
  虽然你的代码里只写了一次<REditor>，但父组件或路由可能重复渲染了<CreatePolicy>组件。可以在CreatePolicy里加一行console.log('CreatePolicy rendered')，看控制台是否多次打印，判断是否存在重复挂载的情况。如果是，检查父组件代码和路由配置，确保该组件只被渲染一次。

• 版本兼容性问题
  部分版本的react-codemirror2和当前React版本不兼容，可能导致内部重复生成编辑器实例。可以尝试升级或降级react-codemirror2到稳定版本（比如4.3.0），同时确认React版本与之匹配。

• 模式引入与配置不匹配
  你代码里引入的是JavaScript模式的文件，但编辑器配置的mode: "css"，这种不匹配可能引发渲染异常。把模式引入改成对应的CSS模式：

  import "codemirror/mode/css/css";
  

  或者将options里的mode改为"javascript"，保持引入和配置一致。

修改后的示例代码：

import "codemirror/lib/codemirror.css";
import "codemirror/theme/eclipse.css";
import "codemirror/mode/css/css";
import { Controlled as REditor } from "react-codemirror2";
import { useState } from "react";

const CreatePolicy = () => {
    const [value, setValue] = useState<string>("");
    
    // 检查组件是否重复渲染
    console.log('CreatePolicy rendered');

    return (
    <div className="create-policy-container">
         <REditor
            className="code-mirror-wrapper"
            onBeforeChange={(editor, data, value) => {
               setValue(value);
             }}
            value={value}
            options={{
            lineWrapping: true,
            lint: true,
            mode: "css",
            theme: "eclipse",
            lineNumbers: true,
           }}
         />
    </div>
  );
};

export default CreatePolicy;

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