fix: 代码缓存修复

xjq7 · Nov 17, 2022 · e3b6d2d · e3b6d2d
1 parent 0ceca1c
commit e3b6d2d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 22 deletions.
diff --git 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
@@ -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}
         />
         <div className={styles.operator}>
           <div className={styles.left}>