debug

.idea/workspace.xml

@@ -20,8 +20,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/pages/Backlog/Backlog.jsx">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-25">
-              <caret line="29" column="96" selection-start-line="29" selection-start-column="96" selection-end-line="29" selection-end-column="96" />
+            <state relative-caret-position="400">
+              <caret line="46" column="11" lean-forward="true" selection-start-line="38" selection-start-column="3" selection-end-line="46" selection-end-column="11" />
               <folding>
                 <element signature="e#0#49#0" expanded="true" />
               </folding>
@@ -32,8 +32,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/pages/Notice/Notice.jsx">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="156">
-              <caret line="57" column="39" lean-forward="true" selection-start-line="57" selection-start-column="3" selection-end-line="57" selection-end-column="39" />
+            <state relative-caret-position="425">
+              <caret line="41" column="11" selection-start-line="41" selection-start-column="11" selection-end-line="41" selection-end-column="11" />
               <folding>
                 <element signature="e#0#49#0" expanded="true" />
               </folding>
@@ -44,8 +44,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/pages/Work/WorkDetail.jsx">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="206">
-              <caret line="56" column="39" selection-start-line="56" selection-start-column="39" selection-end-line="56" selection-end-column="39" />
+            <state relative-caret-position="350">
+              <caret line="41" column="11" selection-start-line="41" selection-start-column="11" selection-end-line="41" selection-end-column="11" />
               <folding>
                 <element signature="e#0#49#0" expanded="true" />
               </folding>
@@ -58,9 +58,9 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="JavaScript File" />
         <option value="React jsx" />
         <option value="Less File" />
+        <option value="JavaScript File" />
       </list>
     </option>
   </component>
@@ -94,8 +94,8 @@
       <find>operate</find>
       <find>console</find>
       <find>common-content</find>
-      <find>setEnd</find>
       <find>tabChange</find>
+      <find>setEnd</find>
     </findStrings>
     <replaceStrings>
       <replace>this.props</replace>
@@ -111,8 +111,6 @@
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
-        <option value="$PROJECT_DIR$/src/components/Adjunct/index.jsx" />
-        <option value="$PROJECT_DIR$/src/resize.js" />
         <option value="$PROJECT_DIR$/public/index.html" />
         <option value="$PROJECT_DIR$/src/components/TodoCard/index.less" />
         <option value="$PROJECT_DIR$/src/components/TodoCard/index.jsx" />
@@ -157,8 +155,10 @@
         <option value="$PROJECT_DIR$/src/pages/Communicate/Communicate.jsx" />
         <option value="$PROJECT_DIR$/src/pages/Work/Work.jsx" />
         <option value="$PROJECT_DIR$/src/components/TopSearch/index.jsx" />
-        <option value="$PROJECT_DIR$/src/components/NoticeTab/index.jsx" />
         <option value="$PROJECT_DIR$/src/utils/instance.js" />
+        <option value="$PROJECT_DIR$/src/components/NoticeTab/index.jsx" />
+        <option value="$PROJECT_DIR$/src/components/useHooks/useDebounce.js" />
+        <option value="$PROJECT_DIR$/src/components/useHooks/useThrottle.js" />
         <option value="$PROJECT_DIR$/src/pages/Backlog/Backlog.jsx" />
         <option value="$PROJECT_DIR$/src/pages/Notice/Notice.jsx" />
         <option value="$PROJECT_DIR$/src/pages/Work/WorkDetail.jsx" />
@@ -166,8 +166,8 @@
     </option>
   </component>
   <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="-8" />
-    <option name="y" value="-8" />
+    <option name="x" value="686" />
+    <option name="y" value="1" />
     <option name="width" value="681" />
     <option name="height" value="768" />
   </component>
@@ -200,26 +200,14 @@
               <item name="create-react-app" type="b2602c69:ProjectViewProjectNode" />
               <item name="create-react-app" type="462c0819:PsiDirectoryNode" />
               <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="components" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="create-react-app" type="b2602c69:ProjectViewProjectNode" />
-              <item name="create-react-app" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="components" type="462c0819:PsiDirectoryNode" />
-              <item name="TopSearch" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="create-react-app" type="b2602c69:ProjectViewProjectNode" />
-              <item name="create-react-app" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="layout" type="462c0819:PsiDirectoryNode" />
+              <item name="pages" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="create-react-app" type="b2602c69:ProjectViewProjectNode" />
               <item name="create-react-app" type="462c0819:PsiDirectoryNode" />
               <item name="src" type="462c0819:PsiDirectoryNode" />
               <item name="pages" type="462c0819:PsiDirectoryNode" />
+              <item name="Notice" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="create-react-app" type="b2602c69:ProjectViewProjectNode" />
@@ -237,7 +225,7 @@
   </component>
   <component name="PropertiesComponent">
     <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="F:/Webpack/ts-react" />
+    <property name="last_opened_file_path" value="F:/社区矫正/braceletAdmin" />
     <property name="list.type.of.created.stylesheet" value="Less" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
@@ -246,6 +234,7 @@
   </component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="F:\即时通讯\create-react-app\src" />
       <recent name="F:\即时通讯\create-react-app\src\pages\Work" />
       <recent name="F:\即时通讯\create-react-app\src\pages\WorkDetail" />
     </key>
@@ -286,18 +275,18 @@
       <workItem from="1591493817957" duration="11217000" />
       <workItem from="1591579020550" duration="32744000" />
       <workItem from="1591665260536" duration="37378000" />
-      <workItem from="1591751569364" duration="11875000" />
+      <workItem from="1591751569364" duration="13538000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="184812000" />
+    <option name="totallyTimeSpent" value="186475000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-8" y="-8" width="1382" height="784" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24962178" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.16641453" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="npm" order="2" side_tool="true" />
       <window_info id="Favorites" order="3" side_tool="true" />
@@ -322,25 +311,6 @@
     <option name="version" value="1" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/src/components/BlankTabs/index.jsx">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="223">
-          <caret line="16" column="27" selection-start-line="16" selection-start-column="27" selection-end-line="16" selection-end-column="27" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/List/index.jsx">
-      <provider selected="true" editor-type-id="text-editor">
-        <state>
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/components/StepCard/index.jsx">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="50">
@@ -631,13 +601,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/NoticeTab/index.jsx">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="475">
-          <caret line="36" column="65" selection-start-line="36" selection-start-column="65" selection-end-line="36" selection-end-column="65" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/pages/Empty.jsx">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="150">
@@ -688,10 +651,31 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/NoticeTab/index.jsx">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="375">
+          <caret line="17" column="58" lean-forward="true" selection-start-line="17" selection-start-column="58" selection-end-line="17" selection-end-column="58" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/useHooks/useThrottle.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="300">
+          <caret line="12" column="40" selection-start-line="12" selection-start-column="40" selection-end-line="12" selection-end-column="40" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/useHooks/useDebounce.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="350">
+          <caret line="14" column="6" lean-forward="true" selection-start-line="3" selection-start-column="2" selection-end-line="14" selection-end-column="6" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/pages/Backlog/Backlog.jsx">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-25">
-          <caret line="29" column="96" selection-start-line="29" selection-start-column="96" selection-end-line="29" selection-end-column="96" />
+        <state relative-caret-position="400">
+          <caret line="46" column="11" lean-forward="true" selection-start-line="38" selection-start-column="3" selection-end-line="46" selection-end-column="11" />
           <folding>
             <element signature="e#0#49#0" expanded="true" />
           </folding>
@@ -700,8 +684,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/pages/Notice/Notice.jsx">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="156">
-          <caret line="57" column="39" lean-forward="true" selection-start-line="57" selection-start-column="3" selection-end-line="57" selection-end-column="39" />
+        <state relative-caret-position="425">
+          <caret line="41" column="11" selection-start-line="41" selection-start-column="11" selection-end-line="41" selection-end-column="11" />
           <folding>
             <element signature="e#0#49#0" expanded="true" />
           </folding>
@@ -710,8 +694,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/pages/Work/WorkDetail.jsx">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="206">
-          <caret line="56" column="39" selection-start-line="56" selection-start-column="39" selection-end-line="56" selection-end-column="39" />
+        <state relative-caret-position="350">
+          <caret line="41" column="11" selection-start-line="41" selection-start-column="11" selection-end-line="41" selection-end-column="11" />
           <folding>
             <element signature="e#0#49#0" expanded="true" />
           </folding>

src/pages/Backlog/Backlog.jsx

@@ -5,6 +5,7 @@ import TopSearch from '../../components/TopSearch';
 import axiosRequest from '../../utils/request';
 import Document from 'react-document-title'
 import Empty from '../Empty'
+import useDebounce from '../../useHooks/useDebounce'
 
 const Backlog = (props) => {
     const [current, setCurrent] = useState(0);
@@ -27,15 +28,15 @@ const Backlog = (props) => {
         }).then(res => {
             setLoading(false);
             let result = end && res.rows ? data.concat(res.rows) : data;
-            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('已经到达底部', 1);
+            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('当前是最后一页', 1);
             setEnd(res.rows && res.rows.length >= 10)
             setData(result);
         });
     };
 
     //下拉加载
-    const [end, setEnd] = useState(true)
-    const handleScroll = () => {
+    const [end, setEnd] = useState(true);
+    const handleScroll = useDebounce(() => {
         const event = document.getElementById("common-content")
         const top = event.scrollTop;
         const scrollHeight = event.scrollHeight;
@@ -43,7 +44,7 @@ const Backlog = (props) => {
         if (top + clientHeight === scrollHeight) {
             getData()
         }
-    };
+    }, 500)
     useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () =>  window.removeEventListener('scroll', handleScroll, true);
@@ -61,7 +62,9 @@ const Backlog = (props) => {
     };
     useEffect(() => {
         getData()
-    }, [searchWord])
+    }, [searchWord]);
+
+    console.log(current)
     return (
         <Document title="待办">
             <WingBlank>

src/pages/Notice/Notice.jsx

@@ -5,6 +5,7 @@ import TopNotice from '../../components/NoticeTab'
 import axiosRequest from '../../utils/request';
 import Document from 'react-document-title'
 import Empty from '../Empty'
+import useDebounce from '../../useHooks/useDebounce'
 
 const Notice = (props) => {
     const [loading, setLoading] = useState(false);
@@ -22,7 +23,7 @@ const Notice = (props) => {
         }).then(res => {
             setLoading(false);
             let result = end && res.rows ? data.concat(res.rows) : data;
-            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('已经到达底部', 1);
+            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('当前是最后一页', 1);
             setEnd(res.rows && res.rows.length >= 10)
             setData(result);
         });
@@ -30,7 +31,7 @@ const Notice = (props) => {
 
     //下拉加载
     const [end, setEnd] = useState(true)
-    const handleScroll = () => {
+    const handleScroll = useDebounce(() => {
         const event = document.getElementById("common-content")
         const top = event.scrollTop;
         const scrollHeight = event.scrollHeight;
@@ -38,7 +39,7 @@ const Notice = (props) => {
         if (top + clientHeight === scrollHeight) {
             getData()
         }
-    };
+    }, 500)
     useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () =>  window.removeEventListener('scroll', handleScroll, true);

src/pages/Work/WorkDetail.jsx

@@ -5,6 +5,7 @@ import TopNotice from '../../components/NoticeTab'
 import axiosRequest from '../../utils/request';
 import './index.less'
 import Empty from '../Empty'
+import useDebounce from '../../useHooks/useDebounce'
 
 const WorkDetail = (props) => {
     const [loading, setLoading] = useState(false);
@@ -22,7 +23,7 @@ const WorkDetail = (props) => {
         }).then(res => {
             setLoading(false);
             let result = end && res.rows ? data.concat(res.rows) : data;
-            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('已经到达底部', 1);
+            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('当前是最后一页', 1);
             setEnd(res.rows && res.rows.length >= 10)
             setData(result);
         });
@@ -30,15 +31,15 @@ const WorkDetail = (props) => {
 
     //下拉加载
     const [end, setEnd] = useState(true)
-    const handleScroll = () => {
-        const event = document.getElementById("work-content")
+    const handleScroll = useDebounce(() => {
+        const event = document.getElementById("common-content")
         const top = event.scrollTop;
         const scrollHeight = event.scrollHeight;
         const clientHeight = event.clientHeight;
         if (top + clientHeight === scrollHeight) {
             getData()
         }
-    };
+    }, 500)
     useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () =>  window.removeEventListener('scroll', handleScroll, true);

src/useHooks/useDebounce.js

+import {useRef, useCallback, useEffect} from 'react';
+
+const UseDebounce = (fn, delay, dep = []) => {
+    const {current} = useRef({fn, timer: null});
+    useEffect(() => {
+        current.fn = fn
+    }, [fn])
+    return useCallback((...args) => {
+        if (current.timer) {
+            clearTimeout(current.timer)
+        }
+        current.timer = setTimeout(() => {
+            current.fn.call(this, ...args)
+        }, delay)
+    })
+};
+
+export default UseDebounce;

src/useHooks/useThrottle.js

+import {useRef, useCallback, useEffect} from 'react';
+
+const UseThrottle = (fn, delay, dep = []) => {
+    const {current} = useRef({fn, timer: null});
+    useEffect(() => {
+        current.fn = fn
+    }, [fn])
+    return useCallback((...args) => {
+        if (!current.timer) {
+           current.timer = setTimeout(() => {
+               delete current.timer
+           }, delay);
+           current.fn.call(this, ...args)
+        }
+    }, dep)
+};
+
+export default UseThrottle;