feat: 解决报错问题

src/pages/businessCustomer/components/CustomerInfoCopy.jsx

@@ -32,7 +32,7 @@ const RadioGroup = Radio.Group;
 const { confirm } = Modal;
 const CustomerInfo = props => {
   const [form] = Form.useForm();
-  const [meals, setMeals] = useState({});
+  const [meals, setMeals] = useState([]);
   const [selectedMealTypes, setSelectedMealTypes] = useState([]);
   const [pickSelfList, setPickSelfList] = useState([]);
 
@@ -43,6 +43,9 @@ const CustomerInfo = props => {
     if (props.onClose && typeof props.onClose === 'function') {
       props.onClose(!!index);
     }
+    setSelectedMealTypes([]);
+    setMeals({});
+    form.setFieldsValue({});
   };
 
   /*
@@ -106,6 +109,7 @@ const CustomerInfo = props => {
       // notification.error({ message: '时间段不能交叉！' });
       return;
     }
+
     params.mealTimePeriod = arr;
     if (res.hideInfo && res.hideInfo.length) {
       params.hidePrice = res.hideInfo.includes('hidePrice') ? 1 : 0;
@@ -235,8 +239,7 @@ const CustomerInfo = props => {
   };
   // 数据模型转换-消费限额, 转为{餐段: {餐品类型: 限额}}
   const processMealLimit = mealLimit => {
-    const mealLimitMap = {};
-
+    const mealLimitMap = [];
     mealLimit.forEach(item => {
       const { mealPeriodType, limit } = item;
 
@@ -328,16 +331,45 @@ const CustomerInfo = props => {
         form.resetFields();
         getPickSelf();
       }
-    } else {
-      setSelectedMealTypes([]);
-      setMeals({});
-      form.setFieldsValue({});
     }
   }, [props.visible]);
 
   /*
    *  1. 表单结构
    */
+  const MealLimitsFormList = item => (
+    <Form.List name="mealLimit" key={item.name}>
+      {mealLimitsFields => (
+        <>
+          {Object.keys(meals).map(meal => (
+            <Form.Item
+              key={`${mealSections[meal]}`}
+              label={`${mealSections[meal]}订单`}
+              required
+              wrapperCol={{ span: 20 }}
+            >
+              <Form.List
+                name={`limit${meal}`}
+                key={`${meal}limit`}
+                required
+                wrapperCol={{ span: 20 }}
+              >
+                {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>
+  );
   const formItem = [
     {
       type: 'Form.Item',
@@ -352,7 +384,6 @@ const CustomerInfo = props => {
       disabled: props.id,
       label: '企业取餐点',
       wrapperCol: { span: 20 },
-      //   todo pickselfIds
       name: 'pickSelfIds',
       rules: [{ required: true, message: '请选择企业取餐点' }],
       component: (
@@ -458,39 +489,7 @@ const CustomerInfo = props => {
             );
           }
           if (item.type === 'Form.List' && !item.disabled) {
-            return (
-              <Form.List name="mealLimit" key={item.name}>
-                {fields => (
-                  <>
-                    {Object.keys(meals).map(meal => (
-                      <Form.Item
-                        key={`${mealSections[meal]}`}
-                        label={`${mealSections[meal]}订单`}
-                        required
-                        wrapperCol={{ span: 20 }}
-                      >
-                        <Form.List
-                          name={`limit${meal}`}
-                          key={`${meal}limit`}
-                          required
-                          wrapperCol={{ span: 20 }}
-                        >
-                          {fs => (
-                            <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>
-            );
+            return MealLimitsFormList(item);
           }
           return null;
         })}

src/pages/businessCustomer/index.jsx

@@ -64,7 +64,7 @@ const BusinessCustomer = () => {
           </Button>,
         ]}
       />
-      {visible && <CustomerInfo visible={visible} id={id} onClose={onClose} />}
+      <CustomerInfo visible={visible} id={id} onClose={onClose} />
     </div>
   );
 };