feat: fix the form is displayed incorrectly

fix the problem that the form is displayed incorrectly when the delete button is clicked in the online debugging view. Modify the code according to antd documentation. https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item
apache · Mar 28, 2021 · 7f7d503 · 7f7d503
1 parent 314f6ca
commit 7f7d503
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/web/src/pages/Route/components/DebugViews/DebugParamsView.tsx b/web/src/pages/Route/components/DebugViews/DebugParamsView.tsx
@@ -44,15 +44,20 @@ const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
                 <Row gutter={16} key={field.name}>
                   <Col span={1}>
                     <Form.Item
+                      {...field}
                       name={[field.name, 'check']}
+                      fieldKey={[field.fieldKey, 'check']}
                       style={{ textAlign: 'right' }}
                       valuePropName="checked"
                     >
                       {fields.length > 1 && index !== fields.length - 1 && <Checkbox />}
                     </Form.Item>
                   </Col>
                   <Col span={8}>
-                    <Form.Item name={[field.name, 'key']}>
+                    <Form.Item
+                      {...field}
+                      name={[field.name, 'key']}
+                      fieldKey={[field.fieldKey, 'key']}>
                       <AutoComplete
                         onSearch={onSearch}
                         placeholder={formatMessage({ id: 'page.route.input.placeholder.paramKey' })}
@@ -75,7 +80,10 @@ const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
                     </Form.Item>
                   </Col>
                   <Col span={8}>
-                    <Form.Item name={[field.name, 'value']}>
+                    <Form.Item
+                      {...field}
+                      name={[field.name, 'value']}
+                      fieldKey={[field.fieldKey, 'value']}>
                       <Input
                         placeholder={formatMessage({
                           id: 'page.route.input.placeholder.paramValue',