完美解决react-codemirror2 编辑器需点击一下或者延时才显示数据的问题

import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql'; 
...
// 引入自动刷新
import 'codemirror/addon/display/autorefresh'
<CodeMirror 
    value={format(code,{lanuage:'plsql'})} 
    options={
        autoRefresh: true, // 重点是这句，为true
        scrollbarStyle: null,
        mode: 'text/x-pgsql',
        theme: 'material',
        autofocus: false,
        readOnly: false,
        lineNumbers: true, 
        smartIndent: true,
        lint: true,
        lintWrapping: true
   } 
    onChange={(editor,data,value)=>{...}}
>
</CodeMirror>

npm install react-codemirror2 codemirror --save

import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
// 主题风格
import 'codemirror/theme/solarized.css';
// 设置代码语言模式（比如JS，SQL，python，java等）
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/shell/shell.js';
import 'codemirror/mode/clike/clike.js';
// 代码模式，clike是包含java,c++等模式的
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/css/css';
//ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/anyword-hint.js'; // end
//代码高亮
import 'codemirror/addon/selection/active-line';
//折叠代码
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
function ScriptTask() {
    const [instance, setInstance] = useState(null);
    const [codeData, setCodeData] = useState('');
    return (
        <CodeMirror
          editorDidMount={(editor) => {
              setInstance(editor);
          }}
          value={codeData}
          options={{
              // mode: { name: 'text/sql' }, //定义mode
              mode: 'sql', //定义mode
              theme: 'solarized', //选中的theme
              autofocus: true, //自动获取焦点
              styleActiveLine: true, //光标代码高亮
              lineNumbers: true, //显示行号
              smartIndent: true, //自动缩进
              //start-设置支持代码折叠
              lineWrapping: true,
              foldGutter: true,
              gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], //end
              extraKeys: {
                  Ctrl: 'autocomplete',
                  'Ctrl-S': function(editor) {
                      this.codeSave(editor);
                  },
                  'Ctrl-Z': function(editor) {
                      editor.undo();
                  }, //undo
                  F8: function(editor) {
                      editor.redo();
                  } //Redo
              },
              matchBrackets: true, //括号匹配，光标旁边的括号都高亮显示
              autoCloseBrackets: true //键入时将自动关闭()[]{}''""
          }}
          // onChange={changeCode}
          // 在失去焦点的时候触发，这个时候放数据最好
          // onBlur={this.codeOnBlur}
          // 这个必须加上，否则在一些情况下，第二次打开就会有问题
          //     onBeforeChange={(editor, data, value) => {
          //       console.log("onBeforeChange fresh")
          //       console.log(JSON.stringify(data));
          //     }}
      />
    )
}