chore: 完善代码

src/components/FlowRecords/index.tsx

@@ -5,7 +5,7 @@
  * @LastEditTime: 2021-06-04 13:48:09
  * @Description: 内、外部流传记录
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
@@ -35,7 +35,7 @@ export interface FetchListParams {
   pageSize: number,
 }
 
-interface IProps extends MellowCardProps {
+export interface IProps extends MellowCardProps {
   /**
    * 外部流转记录数据源，与 fetchOuterList 不能共存
    * 如果两个同时存在 outerDataSource 优先
@@ -66,12 +66,12 @@ interface IProps extends MellowCardProps {
    * 获取外部流转记录方法，与 outerDataSource 不能共存
    * 如果两个同时存在 outerDataSource 优先
    */
-  fetchOuterList?: <T extends ListRes>(params: FetchListParams) => Promise<T>,
+  fetchOuterList?: (params: FetchListParams) => Promise<ListRes>,
   /**
    * 获取内部流转记录方法，与 innerDataSource 不能共存
    * 如果两个同时存在 innerDataSource 优先
    */
-  fetchInnerList?: <T extends ListRes>(params: FetchListParams) => Promise<T>,
+  fetchInnerList?: (params: FetchListParams) => Promise<ListRes>,
 }
 
 const FlowRecords: React.FC<IProps> = (props: IProps) => {
@@ -96,19 +96,21 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
   const [innerLoading, setInnerLoading] = useState(false);
   const [radioValue, setRadioValue] = useState<('inner' | 'outer')>('inner');
 
+  const mounted = useRef(false);
+
   const getOuterList = (params: FetchListParams) => {
     if (outerDataSource) {
       setOuterList({ data: outerDataSource, totalCount: outerDataSource.length });
       return;
     }
-    if (fetchOuterList) {
+    if (fetchOuterList ) {
       setOuterLoading(true);
       fetchOuterList(params).then(res => {
         if (res) {
-          setOuterList(res);
+          mounted.current && setOuterList(res);
         }
       }).finally(() => {
-        setOuterLoading(false);
+        mounted.current && setOuterLoading(false);
       });
     }
   };
@@ -122,15 +124,23 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
       setInnerLoading(true);
       fetchInnerList(params).then(res => {
         if (res) {
-          setInnerList(res);
+          mounted.current && setInnerList(res);
         }
       }).finally(() => {
-        setInnerLoading(false);
+        mounted.current && setInnerLoading(false);
       });
     }
   };
 
   useEffect(() => {
+    mounted.current = true;
+
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
     getOuterList({
       current: outerPage,
       pageSize: outerSize,
@@ -199,7 +209,7 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
         }
         : null
     ),
-  ].filter(Boolean);
+  ].filter(Boolean) as [];
 
   return (
     <MellowCard
@@ -224,7 +234,7 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
               ? {
                 current: outerPage,
                 pageSize: outerSize,
-                total: outerList.totalCount,
+                total: outerList?.totalCount,
               }
               : null
           )}
@@ -242,7 +252,7 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
               ? {
                 current: innerPage,
                 pageSize: innerSize,
-                total: innerList.totalCount,
+                total: innerList?.totalCount,
               }
               : null
           )}