修复快捷键问题

src/pages/Memory/index.tsx

@@ -1,13 +1,13 @@
-import { Button, message, Modal } from 'antd';
-import React, { useEffect, useState } from 'react';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { useSingleState } from 'nice-hooks';
+import {Button, message, Modal} from 'antd';
+import React, {useEffect, useState} from 'react';
+import {PageHeaderWrapper} from '@ant-design/pro-layout';
+import {useSingleState} from 'nice-hooks';
 import Quill from '@/pages/Memory/components/Quill';
 import UpdateForm from '@/pages/Memory/components/UpdateForm';
-import { TableListItem } from '../MemoryList/data.d';
+import {TableListItem} from '../MemoryList/data.d';
 import service from './service';
 import styles from './index.less';
-import { ExclamationCircleOutlined } from '@ant-design/icons/lib';
+import {ExclamationCircleOutlined} from '@ant-design/icons/lib';
 
 enum Step {
   MAIN = 0,
@@ -25,7 +25,7 @@ const TableList: React.FC<{}> = () => {
   const [btnDisable, setBtnDisable] = useState(false);
   let counting = false;
 
-  const { confirm } = Modal;
+  const {confirm} = Modal;
 
   const [state, setState] = useSingleState<State>({
     remindCount: 0,
@@ -60,7 +60,7 @@ const TableList: React.FC<{}> = () => {
       const res = await service.countRemind({});
       hide();
       if (res.success) {
-        setState({ remindCount: parseInt(res.data, 10) });
+        setState({remindCount: parseInt(res.data, 10)});
       }
       counting = false;
     } catch (error) {
@@ -70,13 +70,17 @@ const TableList: React.FC<{}> = () => {
     }
   };
   /**
-   * 进入统计页面
+   * 清空memory
    */
-  const changStepMain = () => {
-    setState({ step: Step.MAIN });
-    countRemind();
+  const clearMemory = () => {
+    setMemory({
+      id: undefined,
+      front: '',
+      back: '',
+    });
   };
 
+
   /**
    * 处理返回值
    * @param res
@@ -85,78 +89,36 @@ const TableList: React.FC<{}> = () => {
     // 只要有返回值，就使按钮可见
     setBtnDisable(false);
     if (res.success) {
-      setState({ showBack: false });
-      setMemory({ ...memory, ...res.data });
+      setState({showBack: false});
+      setMemory({...memory, ...res.data});
     } else {
-      changStepMain();
+      setState({step: Step.MAIN});
     }
   };
 
   const memorySuccess = async (factorInt: number) => {
     setBtnDisable(true);
-    memoryRes(await service.memorySuccess({ id: memory.id, factor: factorInt }));
+    memoryRes(await service.memorySuccess({id: memory.id, factor: factorInt}));
   };
 
-  /**
-   * 清空memory
-   */
-  const clearMemory = () => {
-    setMemory({
-      id: undefined,
-      front: '',
-      back: '',
-    });
-  };
-  /**
-   * 每次修改step，都关闭背面
-   */
-  useEffect(() => {
-    setState({ showBack: false });
-    clearMemory();
-  }, [state.step]);
-
-  useEffect(() => {
-    // console.log(state)
-    // console.log(memory)
-  });
 
   const findNextLine = async () => {
     const res = await service.findNext({});
     if (res.success) {
-      setMemory({ ...memory, ...res.data });
+      setMemory({...memory, ...res.data});
     } else {
-      changStepMain();
+      setState({step: Step.MAIN});
     }
   };
 
-  /**
-   * 初次进入复习页面
-   */
-  const changStepMemory = async () => {
-    if (state.remindCount <= 0) {
-      message.info('已经复习完了哟！');
-      return;
-    }
-    setState({ step: Step.MEMORY });
-    await findNextLine();
-  };
-
-  const changStepAdd = () => {
-    setState({ step: Step.ADD });
-  };
-
-  useEffect(() => {
-    countRemind();
-    setTimeout(() => {
-      countRemind();
-    }, 1000 * 60 * 60); // 每隔一个小时查询一次
-
+  // 绑定快捷键
+  const bindShortKey = () => {
     document.onkeydown = (ev) => {
       // 空格显示背面和默认选择
       if (ev.key === ' ' && state.step === Step.MEMORY) {
         ev.preventDefault(); // 关闭浏览器快捷键
         if (state.showBack === false) {
-          setState({ showBack: true });
+          setState({showBack: true});
         } else {
           memorySuccess(2);
         }
@@ -164,32 +126,63 @@ const TableList: React.FC<{}> = () => {
         // 空格刷新
         // 如果待复习大于0，则直接进去
         if (state.remindCount > 0) {
-          changStepMemory();
+          setState({step: Step.MEMORY});
         } else {
           // 刷新一下，再判断是否应该去复习
           countRemind();
           if (state.remindCount > 0) {
-            changStepMemory();
+            setState({step: Step.MEMORY});
           }
         }
-      }else if (ev.key.toLowerCase() === 'e') {
+      } else if (ev.key.toLowerCase() === 'e') {
         // 快捷 E，进入编辑、新建页面
-        changStepAdd();
+        setState({step: Step.ADD});
+      } else if (ev.key.toLowerCase() === 'escape') {
+        // esc键回到主页
+        setState({step: Step.MAIN});
       }
     };
+  }
+
+  useEffect(() => {
+    countRemind();
+    setTimeout(() => {
+      countRemind();
+    }, 1000 * 60 * 60); // 每隔一个小时查询一次
+    bindShortKey()
+
   }, []);
 
+  useEffect(() => {
+    // 关闭背面，清空 memory
+    setState({showBack: false});
+    clearMemory();
+
+    if (state.step === Step.MAIN) {
+      // 进入统计页面
+      countRemind();
+    } else if (state.step === Step.MEMORY) {
+      findNextLine();
+    }
+  }, [state.step])
+
   return (
     <PageHeaderWrapper title={false}>
       {state.step === Step.MAIN ? (
         <div>
           <div>待复习: {state.remindCount}</div>
-          <p />
-          <Button type="primary" size="large" onClick={changStepMemory}>
+          <p/>
+          <Button type="primary" size="large" onClick={() => {
+            if (state.remindCount <= 0) {
+              message.info('已经复习完了哟！');
+              return;
+            }
+            setState({step: Step.MEMORY})
+          }}>
             复习
           </Button>
-          <p />
-          <Button type="primary" size="large" onClick={changStepAdd}>
+          <p/>
+          <Button type="primary" size="large" onClick={() => setState({step: Step.ADD})}>
             添加
           </Button>
         </div>
@@ -198,13 +191,15 @@ const TableList: React.FC<{}> = () => {
       {state.step === Step.MEMORY ? (
         <div>
           问题:
-          <p />
-          <Quill readonly onChange={() => {}} value={memory.front} />
-          <p />
+          <p/>
+          <Quill readonly onChange={() => {
+          }} value={memory.front}/>
+          <p/>
           {state.showBack ? (
             <div>
-              <Quill readonly onChange={() => {}} value={memory.back} />
-              <p />
+              <Quill readonly onChange={() => {
+              }} value={memory.back}/>
+              <p/>
               <div className={styles.divBottom}>
                 <Button
                   type="primary"
@@ -246,7 +241,7 @@ const TableList: React.FC<{}> = () => {
                 >
                   搁置
                 </Button>
-                <p />
+                <p/>
                 <div>
                   <Button
                     type="primary"
@@ -276,7 +271,7 @@ const TableList: React.FC<{}> = () => {
                     onClick={async () => {
                       confirm({
                         title: '确定删除吗?',
-                        icon: <ExclamationCircleOutlined />,
+                        icon: <ExclamationCircleOutlined/>,
                         content: '删除后无法恢复',
                         okText: '确定',
                         okType: 'danger',
@@ -294,12 +289,12 @@ const TableList: React.FC<{}> = () => {
                     删除
                   </Button>
                 </div>
-                <p />
+                <p/>
                 <div>
                   <Button
                     type="primary"
                     onClick={() => {
-                      changStepAdd();
+                      setState({step: Step.ADD});
                     }}
                   >
                     编辑
@@ -308,7 +303,7 @@ const TableList: React.FC<{}> = () => {
                   <Button
                     type="primary"
                     onClick={() => {
-                      changStepMain();
+                      setState({step: Step.MAIN});
                     }}
                   >
                     关闭
@@ -321,7 +316,7 @@ const TableList: React.FC<{}> = () => {
               <Button
                 type="primary"
                 onClick={() => {
-                  setState({ showBack: true });
+                  setState({showBack: true});
                 }}
               >
                 显示答案
@@ -334,7 +329,8 @@ const TableList: React.FC<{}> = () => {
       {state.step === Step.ADD ? (
         <UpdateForm
           onCancel={() => {
-            changStepMain();
+            bindShortKey();
+            setState({step: Step.MAIN});
           }}
           modalVisible={state.step === Step.ADD}
           values={memory}