chore: 优化组件重复渲染的问题

src/components/NiceForm/components/AntUpload/index.tsx

@@ -109,9 +109,9 @@ const normalizeFileList = fileList => {
       return file.response ? {
         uid: file.uid,
         status: file.status,
-        name: file.name,
         url: file.downloadURL || file.imgURL || file.url,
         ...file.response.data,
+        name: file.name,
         thumbUrl: file.imgURL || getImageByUrl(file.downloadURL || file.url, {
           exclude: ['.png', '.jpg', '.jpeg', '.gif']
         }),

src/pages/payandSettle/creditManage/components/DetailInfo/index.tsx

@@ -24,17 +24,24 @@ import {
   CREDIT_OUTER_STATUS_TAG_MAP, 
   CREDIT_INNER_STATUS_BADGE_MAP, 
 } from '../../../constant';
+import { QuotaInfoData, VerifyData } from '../QuotaApplicationInfo';
 
 const QuotaApplicationInfo = React.lazy(() => import('../QuotaApplicationInfo'));
 const HitoryList = React.lazy(() => import('../HistoryList'));
 const FlowRecords = React.lazy(() => import('../FlowRecords'));
 
 interface QuotaValues {
-  // 审批额度
+  /**
+   * 审批额度
+   */
   quota: number | undefined; 
-  // 申请调整账单日期
+  /**
+   * 申请调整账单日期
+   */
   billDay: number | undefined; 
-  // 申请还款周期
+  /**
+   * 申请还款周期
+   */
   repayPeriod: number | undefined; 
 };
 
@@ -51,14 +58,20 @@ interface DetailInfoProps {
   headExtra?: React.ReactNode;
 };
 
-const DetailInfo: React.FC<DetailInfoProps> = ({
-  id, 
-  creditId, 
-  approvalEditable = false, 
-  target, 
-  headExtra, 
-}) => {
-  const [quotaInfo, setQuotaInfo] = useState<GetPayCreditHandleGetApplyDetailResponse>(null);
+interface QuotaInfo extends GetPayCreditHandleGetApplyDetailResponse {
+  quotaInfo: QuotaInfoData,
+  verify: VerifyData,
+};
+
+const DetailInfo: React.FC<DetailInfoProps> = (props) => {
+  const {
+    id, 
+    creditId, 
+    approvalEditable = false, 
+    target, 
+    headExtra, 
+  } = props;
+  const [quotaInfo, setQuotaInfo] = useState<QuotaInfo>(null);
   const [quotaValues, setQuotaValues] = useState<QuotaValues>({
     quota: undefined, 
     billDay: undefined, 
@@ -79,26 +92,48 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
       if (res.code === 1000) {
         const { verify, apply } = res.data;
 
-        setQuotaInfo(res.data);
+        const quotaValuesData: QuotaValues = {
+          quota: undefined, 
+          billDay: undefined, 
+          repayPeriod: undefined, 
+        };
 
         // 审批信息不存在 或者 审批信息里边 审批额度不存在
         // 说明没有 修改过 审批信息，手动赋值 授信申请里的数据
         if ((!verify || !lodash.isNumber(verify.quota)) && res.data.member.innerStatus === CREDIT_INNER_STATUS_UNCOMMITTED) {
-          setQuotaValues({
-            quota: apply.applyQuota, 
-            billDay: apply.billDay, 
-            repayPeriod: apply.repayPeriod, 
-          });
+          quotaValuesData.quota = apply.applyQuota;
+          quotaValuesData.billDay = apply.billDay;
+          quotaValuesData.repayPeriod = apply.repayPeriod;
         }
 
         // 如果有审批信息则直接赋值 审批信息
         if (verify && lodash.isNumber(verify.quota)) {
-          setQuotaValues({
-            quota: verify.quota, 
-            billDay: verify.billDay, 
-            repayPeriod: verify.repayPeriod, 
-          });
+          quotaValuesData.quota = verify.quota;
+          quotaValuesData.billDay = verify.billDay;
+          quotaValuesData.repayPeriod = verify.repayPeriod;
         }
+
+        setQuotaValues(quotaValuesData);
+
+        setQuotaInfo({
+          ...res.data,
+          quotaInfo: {
+            originalQuota: res.data.apply.originalQuota, 
+            applyQuota: res.data.apply.applyQuota, 
+            billDay: res.data.apply.billDay, 
+            repayPeriod: res.data.apply.repayPeriod, 
+            applyTime: res.data.apply.applyTime, 
+            fileList: res.data.apply.fileList.map(item => normalizeFiledata(item.fileUrl)), 
+            applyType: res.data.apply.applyType, 
+          },
+          verify: lodash.isNumber(quotaValuesData.quota) ? {
+            quota: quotaValuesData.quota, 
+            billDay: quotaValuesData.billDay, 
+            repayPeriod: quotaValuesData.repayPeriod, 
+            verifyTime: quotaInfo?.verify?.verifyTime, 
+            maxApplyQuota: quotaInfo?.verify?.maxApplyQuota, 
+          } : null,
+        });
       }
     }).finally(() => {
       setInfoloading(false);
@@ -115,7 +150,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
       return;
     }
 
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       PublicApi.postPayCreditHandleUpdateVerify({
         applyId: id, 
         ...values,
@@ -214,29 +249,8 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
         <Suspense fallback={null}>
           <QuotaApplicationInfo 
             editable={approvalEditable} 
-            quotaInfo={{
-              originalQuota: quotaInfo?.apply.originalQuota, 
-              applyQuota: quotaInfo?.apply.applyQuota, 
-              billDay: quotaInfo?.apply.billDay, 
-              repayPeriod: quotaInfo?.apply.repayPeriod, 
-              applyTime: quotaInfo?.apply.applyTime, 
-              fileList: (
-                quotaInfo && quotaInfo.apply && quotaInfo.apply.fileList ? 
-                  quotaInfo.apply.fileList.map(item => normalizeFiledata(item.fileUrl)) : 
-                  []
-              ), 
-              applyType: quotaInfo?.apply.applyType, 
-            }}
-            verify={
-              lodash.isNumber(quotaValues.quota) ? {
-                quota: quotaValues.quota, 
-                billDay: quotaValues.billDay, 
-                repayPeriod: quotaValues.repayPeriod, 
-                verifyTime: quotaInfo?.verify?.verifyTime, 
-                maxApplyQuota: quotaInfo?.verify?.maxApplyQuota, 
-              } : 
-              null
-            }
+            quotaInfo={quotaInfo?.quotaInfo}
+            verify={quotaInfo?.verify}
             onSubmit={handleQuotaSubmit}
           />
         </Suspense>
@@ -264,4 +278,4 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
   );
 };
 
-export default DetailInfo;
\ No newline at end of file
+export default React.memo(DetailInfo);
\ No newline at end of file

src/pages/payandSettle/creditManage/components/QuotaApplicationInfo/index.tsx

@@ -21,39 +21,60 @@ import styles from './index.less';
 const formActions = createFormActions();
 const { onFormInit$ } = FormEffectHooks;
 
+export interface QuotaInfoData {
+  /**
+   * 现有额度
+   */
+  originalQuota: number, 
+  /**
+   * 申请调整额度
+   */
+  applyQuota: number, 
+  /**
+   * 申请调整账单日期
+   */
+  billDay: number, 
+  /**
+   * 申请还款周期
+   */
+  repayPeriod: number, 
+  /**
+   * 申请时间
+   */
+  applyTime: string, 
+  /**
+   * 申请附件
+   */
+  fileList: FileData[];
+  /**
+   * 申请类型 1-外部 2-内部
+   */
+  applyType: number;
+}
+
+export interface VerifyData {
+  // 审批额度
+  quota: number, 
+  // 审批账单日期
+  billDay: number, 
+  // 审批账单生成后还款周期
+  repayPeriod: number, 
+  // 审批时间
+  verifyTime: string, 
+  // 最大申请额度
+  maxApplyQuota: number, 
+}
 interface QuotaApplicationInfo {
   editable?: boolean;
   onSubmit?: (values: {[key: string]: any}) => Promise<unknown>;
-  // 授信申请信息
-  quotaInfo: {
-    // 现有额度
-    originalQuota: number, 
-    // 申请调整额度
-    applyQuota: number, 
-    // 申请调整账单日期
-    billDay: number, 
-    // 申请还款周期
-    repayPeriod: number, 
-    // 申请时间
-    applyTime: string, 
-    // 申请附件
-    fileList: FileData[];
-    // 申请类型 1-外部 2-内部
-    applyType: number;
-  },
-  // 授信审批信息
-  verify: {
-    // 审批额度
-    quota: number, 
-    // 审批账单日期
-    billDay: number, 
-    // 审批账单生成后还款周期
-    repayPeriod: number, 
-    // 审批时间
-    verifyTime: string, 
-    // 最大申请额度
-    maxApplyQuota: number, 
-  } | null, 
+  /**
+   * 授信申请信息
+   */
+  quotaInfo: QuotaInfoData,
+  /**
+   * 授信审批信息
+   */
+  verify: VerifyData | null, 
 };
 
 const QuotaApplicationInfo: React.FC<QuotaApplicationInfo> = ({
@@ -290,4 +311,4 @@ const QuotaApplicationInfo: React.FC<QuotaApplicationInfo> = ({
   );
 };
 
-export default QuotaApplicationInfo;
\ No newline at end of file
+export default React.memo(QuotaApplicationInfo);
\ No newline at end of file