React CodeMirror 2如何显示之前输入的变量

Question

我是使用ReactCodemirror2包装器将Javascript编辑器引入我的ReactJS应用程序中。问题在于，我无法弄清楚如何重复使用已定义的变量，我的意思是这样的：

正如您所看到的，firstNumber 不会出现在自动完成对话框中。我进行了研究，并发现 anyword-hint.js 可能会解决问题，寻找任何以前编写的单词。我该如何告诉编辑器使用 anyword-hint？或者有更好的方法来使用预定义变量吗？

这是我拥有的：

import React from 'react';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/abcdef.css';
import 'codemirror/theme/eclipse.css';
import 'codemirror/lib/codemirror';
import 'codemirror/theme/mbo.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/keymap/sublime';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import { JSHINT } from 'jshint';
import { Controlled as CodeMirror } from 'react-codemirror2';

import 'codemirror/addon/hint/anyword-hint';

window.JSHINT = JSHINT;

export default function MyEditor(props) {
  const [options, setOptions] = useState({
    mode: 'javascript',
    lineWrapping: true,
    smartIndent: true,
    lineNumbers: true,
    foldGutter: true,
    gutters: [
      'CodeMirror-linenumbers',
      'CodeMirror-foldgutter',
      'CodeMirror-lint-markers'
    ],
    autoCloseTags: true,
    keyMap: 'sublime',
    matchBrackets: true,
    autoCloseBrackets: true,
    lint: true
  });

  const extraKeys = React.useMemo(() => ({
    'Ctrl-Space': 'autocomplete',
    Tab: 'autocomplete'
  }), []);

  useEffect(() => {
    const opt = { ...options };
    opt.extraKeys = extraKeys;
    setOptions(opt);
  }, []);

  return (
    <CodeMirror
      editorDidMount={editor => {
        
      }}
      value={code}
      options={options}
      onBeforeChange={(editor, data, value) => {
        
      }}
      onChange={(editor, data, value) => {

      }}

      className={height !== 0 ? classes.setHeight : null}
    />
  );
}

- assembler

---

找到任何解决方案了吗？ - era s'q

Answer 1

从索引文件中删除 React.StrictMode 将解决此问题，我仍在寻找它以那种方式工作的原因。

- Harjeevan Singh

---

感谢您提供答案，不过最好附上为什么这是正确答案的解释。 - OneNeptune

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community