fix: 修改FormList报错问题

src/example/proForm/ModalForm/bll.js

@@ -75,21 +75,21 @@ const transformMealTimePeriod = mealTimePeriod => {
  * 接口来源数据： [{mealPeriodType: '1', limit: [{mealType: '1', limit: 100}，{mealType: '2', limit: 200}]}]
  * 转换后表单结构：mealLimit: { limit1: {1: 100, 2: 200}, limit2: {1: 100, 2: 200}}
  */
-const transformMealLimit = mealLimit => {
-  const mealLimitMap = {};
-  mealLimit.forEach(item => {
-    const { mealPeriodType, limit } = item;
+// const transformMealLimit = mealLimit => {
+//   const mealLimitMap = {};
+//   mealLimit.forEach(item => {
+//     const { mealPeriodType, limit } = item;
 
-    mealLimitMap[`limit${mealPeriodType}`] = limit.reduce(
-      (acc, t) => ({
-        ...acc,
-        [t.mealType]: t.limit,
-      }),
-      {},
-    );
-  });
-  return mealLimitMap;
-};
+//     mealLimitMap[`limit${mealPeriodType}`] = limit.reduce(
+//       (acc, t) => ({
+//         ...acc,
+//         [t.mealType]: t.limit,
+//       }),
+//       {},
+//     );
+//   });
+//   return mealLimitMap;
+// };
 
 /**
  * 3. 数据模型转换-接口获取数据转换为表单数据
@@ -124,10 +124,10 @@ export const transformVOToFormData = data => {
   }
 
   const { mealTimePeriodMap, mealTimePeriodArr } = transformMealTimePeriod(mealTimePeriod);
-  const mealLimitMap = transformMealLimit(mealLimit);
+  // const mealLimitMap = transformMealLimit(mealLimit);
 
   formData.mealTimePeriod = mealTimePeriodArr;
-  formData.mealLimit = mealLimitMap;
+  formData.mealLimit = mealLimit;
   formData.mealTimePeriodMap = mealTimePeriodMap;
   return formData;
 };
@@ -143,6 +143,7 @@ export const transformFormDataToDTO = async (res, selectedMealTypes, selectedMea
   };
   if (params.pickSelfIds) {
     params.pickselfIds = params.pickSelfIds;
+    delete params.pickSelfIds;
   }
   /**
    * 处理餐段 mealTimePeriod
@@ -178,26 +179,26 @@ export const transformFormDataToDTO = async (res, selectedMealTypes, selectedMea
    * mealPeriodType 餐段类型：（1早餐，2午餐，4晚餐）
    * mealType       餐品类型：（1外卖 2 自助餐 4到店）
    */
-  const limits = [];
-  res.mealLimit &&
-    Object.keys(res.mealLimit).forEach(item => {
-      const mealPeriodType = item.replace('limit', '');
-      if (selectedMealSections[mealPeriodType]) {
-        const json = {
-          mealPeriodType,
-          limit: [],
-        };
-        Object.keys(res.mealLimit[item]).forEach(t => {
-          if (selectedMealTypes.includes(t)) {
-            json.limit.push({
-              mealType: t,
-              limit: res.mealLimit[item][t],
-            });
-          }
-        });
-        limits.push(json);
-      }
-    });
-  params.mealLimit = limits;
+  // const limits = [];
+  // res.mealLimit &&
+  //   Object.keys(res.mealLimit).forEach(item => {
+  //     const mealPeriodType = item.replace('limit', '');
+  //     if (selectedMealSections[mealPeriodType]) {
+  //       const json = {
+  //         mealPeriodType,
+  //         limit: [],
+  //       };
+  //       Object.keys(res.mealLimit[item]).forEach(t => {
+  //         if (selectedMealTypes.includes(t)) {
+  //           json.limit.push({
+  //             mealType: t,
+  //             limit: res.mealLimit[item][t],
+  //           });
+  //         }
+  //       });
+  //       limits.push(json);
+  //     }
+  //   });
+  // params.mealLimit = limits;
   return params;
 };

src/example/proForm/ModalForm/components/MealFormListLimit.jsx

-import React from 'react';
-import { Form, Row, Col } from 'antd';
-import { mealType, mealSections } from '../staticData';
-import MealLimit from './MealLimit';
-
-/**
- * 渲染 企业单笔消费限额 二维表单项目
- */
-const MealLimitsFormList = (meals, selectedMealTypes) => (
-  <Form.List name="mealLimit" key="mealLimit">
-    {mealLimitsFields => (
-      <>
-        {Object.keys(meals).map(meal => (
-          <Form.Item
-            key={`${mealSections[meal]}`}
-            label={`${mealSections[meal]}订单`}
-            required
-            labelCol={{ span: 4 }}
-            wrapperCol={{ span: 20 }}
-          >
-            <Form.List
-              name={`limit${meal}`}
-              key={`${meal}limit`}
-              required
-              wrapperCol={{ span: 21 }}
-            >
-              {mealLimitsFieldsList => (
-                <Row key={`row${meal}`}>
-                  {selectedMealTypes.map((t, i) => (
-                    <Col span={7} offset={i ? 1 : 0} key={t}>
-                      <MealLimit value={t} label={mealType[t]} name={`${t}`} />
-                    </Col>
-                  ))}
-                </Row>
-              )}
-            </Form.List>
-          </Form.Item>
-        ))}
-      </>
-    )}
-  </Form.List>
-);
-
-export default MealLimitsFormList;

src/example/proForm/ModalForm/components/MealFormListLimitForm.jsx

+import React from 'react';
+import { Form, Row, Col, Input } from 'antd';
+import { mealType, mealSections } from '../staticData';
+import MealLimit from './MealLimit';
+
+/**
+ * 渲染 企业单笔消费限额 二维表单项目
+ */
+const MealLimitsFormList = (meals, selectedMealTypes) => (
+  <Form.List name="mealLimit" key="mealLimit">
+    {() => (
+      <>
+        {Object.keys(meals).map((meal, i) => (
+          <Row key={`meal${meal}`}>
+            <Col span={0}>
+              <Form.Item
+                label=""
+                name={[i, 'mealPeriodType']}
+                labelCol={{ span: 0 }}
+                wrapperCol={{ span: 0 }}
+              >
+                <Input type="hidden" value={meal} />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label={`${mealSections[meal]}订单`}
+                required
+                labelCol={{ span: 4 }}
+                wrapperCol={{ span: 20 }}
+              >
+                <Form.List name={[i, 'limit']} required wrapperCol={{ span: 21 }}>
+                  {() => (
+                    <Row key={`row${meal}`}>
+                      {selectedMealTypes.map((t, j) => (
+                        <Col key={`col${t}`} span={7}>
+                          <Row>
+                            <Col span={0}>
+                              <Form.Item
+                                label=""
+                                name={[j, 'mealType']}
+                                labelCol={{ span: 0 }}
+                                wrapperCol={{ span: 0 }}
+                              >
+                                <Input type="hidden" value={t} />
+                              </Form.Item>
+                            </Col>
+                            <Col span={24} offset={j ? 1 : 0}>
+                              <MealLimit label={mealType[t]} name={[j, 'limit']} />
+                            </Col>
+                          </Row>
+                        </Col>
+                      ))}
+                    </Row>
+                  )}
+                </Form.List>
+              </Form.Item>
+            </Col>
+          </Row>
+        ))}
+      </>
+    )}
+  </Form.List>
+);
+
+export default MealLimitsFormList;

src/example/proForm/ModalForm/components/MealLimit.jsx

@@ -3,10 +3,11 @@ import { Form, InputNumber } from 'antd';
 import { validateRequired, isCheckPriceTwoDecimal } from '@/utils/validator';
 
 const MealLimit = props => (
+  // console.log('props :>> ', props);
   <Form.Item
     label={`${props.label}限额`}
     name={props.name}
-    value={props.value}
+    initialValue={props.value}
     labelCol={{ span: 10 }}
     wrapperCol={{ span: 14 }}
     rules={[
@@ -17,5 +18,4 @@ const MealLimit = props => (
     <InputNumber addonAfter="元" max={999.99} />
   </Form.Item>
 );
-
 export default MealLimit;

src/example/proForm/ModalForm/index.jsx

+/* eslint-disable no-unused-expressions */
 import React, { useEffect, useRef, useState } from 'react';
 import { notification } from 'antd';
+import { unstable_batchedUpdates } from 'react-dom';
 import { BetaSchemaForm } from '@ant-design/pro-components';
 import { layout, getBaseFormItem } from './staticData';
 import { checkConfirm, transformVOToFormData, transformFormDataToDTO } from './bll';
@@ -9,27 +11,14 @@ import { apiEnterpriseInfo, apiNewEnterprise, apiEditEnterprise } from './servic
 const CustomerInfo = props => {
   const [selectedMealSections, setSelectedMealSections] = useState([]); // 选中的餐段
   const [selectedMealTypes, setSelectedMealTypes] = useState([]); // 选中的餐品类型
-  const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
-  const refForm = useRef();
-
+  const refForm = useRef(null);
   /**
    *  7. 表单关闭
    * @param {boolean} isRefresh 是否刷新列表
    */
   const closeModal = isRefresh => {
-    if (typeof props.onClose === 'function') {
-      props.onClose(!!isRefresh);
-    }
-    setSelectedMealTypes([]);
-    setSelectedMealSections({});
-    refForm.current.setFieldsValue({
-      mealLimit: [],
-    });
-  };
-
-  const onOpenChange = v => {
-    if (!v) {
-      closeModal(!1);
+    if (!isRefresh && typeof props.onClose === 'function') {
+      props.onClose(isRefresh === 0);
     }
   };
 
@@ -50,7 +39,7 @@ const CustomerInfo = props => {
     const resp = await api(data);
     if (resp && resp.data) {
       // 保存成功后刷新列表
-      closeModal(!0);
+      closeModal(0);
       notification.success({ message: '保存成功！' });
     }
   };
@@ -77,11 +66,11 @@ const CustomerInfo = props => {
 
       // 注意 须先set 再from.setFieldsValue 防止丢失数据
       setSelectedMealTypes(mt);
-      refForm.current.setFieldsValue({
+      refForm.current?.setFieldsValue?.({
         mealType: mt,
       });
     } catch {
-      refForm.current.setFieldsValue({
+      refForm.current?.setFieldsValue?.({
         mealType: selectedMealTypes,
       });
     }
@@ -104,12 +93,12 @@ const CustomerInfo = props => {
     setSelectedMealSections(values);
     // 餐段都没选 则设置为空数组
     if (Object.keys(values).length === 0) {
-      refForm.current.setFieldsValue({
+      refForm.current?.setFieldsValue?.({
         mealTimePeriod: null,
       });
     }
     // 触发验证当前自段 是否显示表单提示
-    refForm.current.validateFields(['mealTimePeriod']);
+    refForm.current?.validateFields?.(['mealTimePeriod']);
   };
 
   /**
@@ -117,20 +106,33 @@ const CustomerInfo = props => {
    * 把接口数据转换成表单需要的数据格式
    */
   const getInfo = async () => {
-    if (!props.id) {
-      return {};
-    }
+    // if (!props.id) {
+    //   return {};
+    // }
     const res = await apiEnterpriseInfo(props.id);
     if (res && res.data) {
       // 转换成表单需要的数据
       const formData = transformVOToFormData(res.data);
-      // 选中的餐品类型
-      setSelectedMealTypes(formData.mealType);
-      // 选中的餐段
-      setSelectedMealSections(formData.mealTimePeriodMap);
-      return formData;
+
+      /**
+       * 使用setTimeout 的原因是防止 setState的时候 refForm丢失引用
+       * 导致 refForm.current.validateFields 报错
+       * 先渲染完表单再setState
+       * */
+      // setTimeout(() => {
+      //   // setState 会导致组件重新渲染 为了防止多次渲染 使用 unstable_batchedUpdates 之后
+      //   // React 18 会优化该问题
+      unstable_batchedUpdates(() => {
+        // 选中的餐品类型
+        setSelectedMealTypes(formData.mealType);
+        // 选中的餐段
+        setSelectedMealSections(formData.mealTimePeriodMap);
+      });
+      // });
+      // return formData;
+      refForm.current?.setFieldsValue?.(formData);
     }
-    return {};
+    // return {};
   };
 
   useEffect(() => {
@@ -142,13 +144,13 @@ const CustomerInfo = props => {
     }
   }, [props.visible]);
 
-  const formItem = getBaseFormItem({
+  const formColumns = getBaseFormItem({
     onChangeMealType,
     onChangeMealSection,
     id: props.id,
     selectedMealSections,
     selectedMealTypes,
-    form: refForm.current,
+    refForm,
   });
 
   return (
@@ -160,15 +162,14 @@ const CustomerInfo = props => {
       modalProps={{
         maskClosable: false,
         destroyOnClose: true,
-        confirmLoading: pageLoading,
       }}
-      request={getInfo}
+      // request={getInfo}
       formRef={refForm}
-      onOpenChange={onOpenChange}
+      onOpenChange={closeModal}
       layout="horizontal"
       {...layout}
       onFinish={submitForm}
-      columns={formItem}
+      columns={formColumns}
     />
   );
 };

src/example/proForm/ModalForm/staticData.js

 import React from 'react';
 import moment from 'moment';
 import MealSection from './components/MealSection';
-import MealFormListLimit from './components/MealFormListLimit';
+import MealFormListLimit from './components/MealFormListLimitForm';
 import { getPickSelf } from './bll';
 
 const hideEnums = { hidePrice: '隐藏商品价格', hideImage: '隐藏商品图片' };
@@ -36,8 +36,8 @@ const checkTime = (arr, current) => {
   return valid;
 };
 // 验证餐段
-const validateMeals = (form, selectedMealSections) => {
-  const { mealTimePeriod = [] } = form.getFieldValue();
+const validateMeals = (refForm, selectedMealSections) => {
+  const { mealTimePeriod = [] } = refForm.current?.getFieldValue?.() || {};
   const arr = [];
   let validTime = false;
   mealTimePeriod.forEach(item => {
@@ -68,7 +68,7 @@ export const getBaseFormItem = options => {
     onChangeMealType,
     selectedMealSections,
     onChangeMealSection,
-    form,
+    refForm,
   } = options;
 
   const baseColumn = [
@@ -129,7 +129,7 @@ export const getBaseFormItem = options => {
       renderFormItem: () => (
         <MealSection
           meals={selectedMealSections}
-          validateMeals={() => validateMeals(form, selectedMealSections)}
+          validateMeals={() => validateMeals(refForm, selectedMealSections)}
           onChangeSection={onChangeMealSection}
         />
       ),

src/example/proTable/index.jsx

@@ -30,7 +30,6 @@ const BusinessCustomer = () => {
   };
 
   const onClose = refresh => {
-    console.log(3);
     setVisible(false);
     refresh && refTable.current.reload();
   };