diff --git a/client/src/pages/editor/index.tsx b/client/src/pages/editor/index.tsx index 646288f..8787c12 100644 --- a/client/src/pages/editor/index.tsx +++ b/client/src/pages/editor/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import Editor, { Expose, languageMap } from '~components/CodeEditorMonaco'; import styles from './index.module.less'; import Header from './components/Header'; @@ -16,9 +16,9 @@ const Component = () => { const [editorConfig] = useState(() => EditorConfig); const { editorThemeType, codeType } = editorConfig; - const getEditor = () => { + const getEditor = useCallback(() => { return editorRef.current?.getEditor(); - }; + }, [editorRef.current]); useEffect(() => { const codeCache = diff --git a/client/src/pages/question/index.tsx b/client/src/pages/question/index.tsx index 6b4d9a0..53870d3 100644 --- a/client/src/pages/question/index.tsx +++ b/client/src/pages/question/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; import Editor, { Expose, languageMap } from '~components/CodeEditorMonaco'; import { marked } from 'marked'; import styles from './index.module.less'; @@ -37,28 +37,22 @@ function Question() { }; const saveCode = () => { - if (detail?.name) { - storage.set( - CodeStorageKey[CodeType.nodejs] + '_' + detail?.name, - editorRef.current?.getEditor()?.getValue() - ); - } + storage.set( + CodeStorageKey[CodeType.nodejs] + '_' + detail?.name, + editorRef.current?.getEditor()?.getValue() + ); }; - useEffect(() => { - const editor = editorRef.current?.getEditor(); - if (editor && detail) { - editor.setValue( - storage.get(CodeStorageKey[CodeType.nodejs] + '_' + detail?.name) || - detail?.index - ); - } + const defaultCode = useMemo(() => { + return ( + storage.get(CodeStorageKey[CodeType.nodejs] + '_' + detail?.name) || + detail?.index + ); }, [detail]); useEffect(() => { const editor = editorRef.current?.getEditor(); - - if (editor) { + if (editor && detail) { const debounceSaveCode = debounce(saveCode, autoSaveDelay * 1000); const saveCodeListen = editor ?.getModel() @@ -70,7 +64,7 @@ function Question() { debounceSaveCode.cancel(); }; } - }, [autoSaveDelay, editorRef]); + }, [autoSaveDelay, editorRef.current, detail]); useEffect(() => { const fetchQuestion = async () => { @@ -116,7 +110,7 @@ function Question() { className={styles.editor} theme={ThemeType['Visual Studio Dark']} language={languageMap[CodeType.nodejs]} - code={detail?.index || ''} + code={defaultCode} />