添加快捷键

src/pages/Memory/index.tsx

@@ -1,10 +1,10 @@
 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 {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";
@@ -23,8 +23,9 @@ interface State {
 
 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,
@@ -48,23 +49,31 @@ const TableList: React.FC<{}> = () => {
    * @param fields
    */
   const countRemind = async () => {
+    // 如果上一个查询还没有结束，则直接返回
+    console.log(counting);
+    if (counting) {
+      return;
+    }
+    counting = true;
     const hide = message.loading('正在查询');
     try {
       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) {
       hide();
       message.error('查询异常！');
+      counting = false;
     }
   };
   /**
    * 进入统计页面
    */
   const changStepMain = () => {
-    setState({ step: Step.MAIN });
+    setState({step: Step.MAIN});
     countRemind();
   };
   /**
@@ -75,8 +84,8 @@ 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();
     }
@@ -84,26 +93,9 @@ const TableList: React.FC<{}> = () => {
 
   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}));
   };
 
-  useEffect(() => {
-    countRemind();
-    setTimeout(() => {
-      countRemind();
-    }, 1000 * 60 * 60); // 每隔一个小时查询一次
-
-    document.onkeydown = (ev) => {
-      if (ev.key === ' ' && state.step === Step.MEMORY) {
-        ev.preventDefault(); // 关闭浏览器快捷键
-        if (state.showBack === false) {
-          setState({ showBack: true });
-        } else {
-          memorySuccess(2);
-        }
-      }
-    };
-  }, []);
 
   /**
    * 清空memory
@@ -119,7 +111,7 @@ const TableList: React.FC<{}> = () => {
    * 每次修改step，都关闭背面
    */
   useEffect(() => {
-    setState({ showBack: false });
+    setState({showBack: false});
     clearMemory();
   }, [state.step]);
 
@@ -131,7 +123,7 @@ const TableList: React.FC<{}> = () => {
   const findNextLine = async () => {
     const res = await service.findNext({});
     if (res.success) {
-      setMemory({ ...memory, ...res.data });
+      setMemory({...memory, ...res.data});
     } else {
       changStepMain();
     }
@@ -145,24 +137,54 @@ const TableList: React.FC<{}> = () => {
       message.info('已经复习完了哟！');
       return;
     }
-    setState({ step: Step.MEMORY });
+    setState({step: Step.MEMORY});
     await findNextLine();
   };
 
   const changStepAdd = () => {
-    setState({ step: Step.ADD });
+    setState({step: Step.ADD});
   };
 
+  useEffect(() => {
+    countRemind();
+    setTimeout(() => {
+      countRemind();
+    }, 1000 * 60 * 60); // 每隔一个小时查询一次
+
+    document.onkeydown = (ev) => {
+      if (ev.key === ' ' && state.step === Step.MEMORY) {
+        ev.preventDefault(); // 关闭浏览器快捷键
+        if (state.showBack === false) {
+          setState({showBack: true});
+        } else {
+          memorySuccess(2);
+        }
+      } else if (ev.key === ' ' && state.step === Step.MAIN) {
+        // 如果待复习大于0，则直接进去
+        if (state.remindCount > 0) {
+          changStepMemory();
+        } else {
+          // 刷新一下，再判断是否应该去复习
+          countRemind();
+          if (state.remindCount > 0) {
+            changStepMemory();
+          }
+        }
+
+      }
+    };
+  }, []);
+
   return (
     <PageHeaderWrapper title={false}>
       {state.step === Step.MAIN ? (
         <div>
           <div>待复习: {state.remindCount}</div>
-          <p />
+          <p/>
           <Button type="primary" size="large" onClick={changStepMemory}>
             复习
           </Button>
-          <p />
+          <p/>
           <Button type="primary" size="large" onClick={changStepAdd}>
             添加
           </Button>
@@ -172,13 +194,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"
@@ -219,7 +243,7 @@ const TableList: React.FC<{}> = () => {
                 >
                   搁置
                 </Button>
-                <p />
+                <p/>
                 <div>
                   <Button
                     type="primary"
@@ -247,7 +271,7 @@ const TableList: React.FC<{}> = () => {
                     onClick={async () => {
                       confirm({
                         title: '确定删除吗?',
-                        icon: <ExclamationCircleOutlined />,
+                        icon: <ExclamationCircleOutlined/>,
                         content: '删除后无法恢复',
                         okText: '确定',
                         okType: 'danger',
@@ -264,7 +288,7 @@ const TableList: React.FC<{}> = () => {
                     删除
                   </Button>
                 </div>
-                <p />
+                <p/>
                 <div>
                   <Button
                     type="primary"
@@ -291,7 +315,7 @@ const TableList: React.FC<{}> = () => {
               <Button
                 type="primary"
                 onClick={() => {
-                  setState({ showBack: true });
+                  setState({showBack: true});
                 }}
               >
                 显示答案