fix-alert-instance-state-bug

Zzm0809 · Dec 22, 2023 · 4eac60a · 4eac60a
1 parent 7a9988f
commit 4eac60a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/...src/pages/RegCenter/Alert/AlertInstance/components/AlertTypeChoose/InstanceForm/index.tsx b/...src/pages/RegCenter/Alert/AlertInstance/components/AlertTypeChoose/InstanceForm/index.tsx
@@ -41,6 +41,9 @@ const InstanceForm: React.FC<InstanceFormProps> = (props) => {
 
   const [alertType, setAlertType] = useState<string>(values.type ?? ALERT_TYPE.DINGTALK);
 
+  const [formValues, setFormValues] = useState<Partial<Alert.AlertInstance>>(values);
+
+
   const renderPreForm = () => {
     return (
       <>
@@ -87,10 +90,16 @@ const InstanceForm: React.FC<InstanceFormProps> = (props) => {
 
   return (
     <>
-      <ProForm form={form} submitter={false}>
+      <ProForm
+          form={form}
+          onValuesChange={(changedValues, allValues) =>
+              setFormValues((prevState) => ({ ...prevState, ...allValues, ...changedValues }))
+         }
+          submitter={false}
+      >
         <ProForm.Group>
           {renderPreForm()}
-          {renderFormByType(values, alertType)}
+          {renderFormByType(formValues, alertType)}
         </ProForm.Group>
       </ProForm>
     </>

diff --git a/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertTypeChoose/index.tsx b/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertTypeChoose/index.tsx
@@ -52,7 +52,6 @@ const AlertTypeChoose: React.FC<UpdateFormProps> = (props) => {
     loading
   } = props;
 
-  const [formValues, setFormValues] = useState<Partial<Alert.AlertInstance>>(values);
 
   /**
    * init form
@@ -81,17 +80,17 @@ const AlertTypeChoose: React.FC<UpdateFormProps> = (props) => {
    * when modalVisible or values changed, set form values
    */
   useEffect(() => {
-    form.setFieldsValue(formValues);
-  }, [modalVisible, formValues, form]);
+    form.setFieldsValue(values);
+  }, [modalVisible, values, form]);
 
   const testSend = async () => {
     const validateFields = await form.validateFields();
-    handleTest({ ...formValues, ...validateFields });
+    handleTest({ ...values, ...validateFields });
   };
 
   const submit = async () => {
     const validateFields = await form.validateFields();
-    handleSubmit({ ...formValues, ...validateFields });
+    handleSubmit({ ...values, ...validateFields });
     handleCancel();
   };
 
@@ -120,18 +119,15 @@ const AlertTypeChoose: React.FC<UpdateFormProps> = (props) => {
     <>
       <ModalForm<Alert.AlertInstance>
         {...NORMAL_MODAL_OPTIONS}
-        title={formValues?.id ? l('rc.ai.modify') : l('rc.ai.create')}
+        title={values?.id ? l('rc.ai.modify') : l('rc.ai.create')}
         open={modalVisible}
         form={form}
-        initialValues={formValues}
-        onValuesChange={(changedValues, allValues) =>
-          setFormValues((prevState) => ({ ...prevState, ...allValues, ...changedValues }))
-        }
+        initialValues={values}
         modalProps={{ onCancel: handleCancel, ...NORMAL_MODAL_OPTIONS }}
         submitter={{ render: () => [...renderFooter()] }}
         syncToInitialValues
       >
-        <InstanceForm form={form} values={formValues} />
+        <InstanceForm form={form} values={values} />
       </ModalForm>
     </>
   );