fix: 修复 inputTable 在分页情况切换数据表单项不更新的问题 (#10157)

baidu · May 6, 2024 · e7dd9db · e7dd9db
1 parent 9e202bb
commit e7dd9db
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 2 deletions.
diff --git a/packages/amis/__tests__/renderers/Form/inputTable.test.tsx b/packages/amis/__tests__/renderers/Form/inputTable.test.tsx
@@ -1020,8 +1020,6 @@ test('Renderer:input-table canAccessSuperData', async () => {
   expect(inputs).toEqual(['a1', '']);
 });
 
-
-
 // 对应 github issue: https://github.com/baidu/amis/issues/9537
 test('Renderer:input-table item confirm validate', async () => {
   const onSubmit = jest.fn();
@@ -1085,3 +1083,74 @@ test('Renderer:input-table item confirm validate', async () => {
 
   expect(container.querySelector('.has-error--isRequired')).toBeInTheDocument();
 });
+
+// 问题：分页切换后，新行数据中不存在原始行中的某个数据，但是切换后，表单项还是展示的原来的值
+// 比如下面的例子，新行 c 字段不存在，但是切过去后，c 显示 c1
+test('Renderer:input-table pagination data issue', async () => {
+  const onSubmit = jest.fn();
+  const {container, findByRole, findByText} = render(
+    amisRender(
+      {
+        type: 'page',
+        body: {
+          type: 'form',
+          data: {
+            table: [
+              {
+                a: 'a1',
+                b: 'b1',
+                c: 'c1'
+              },
+              {
+                a: 'a2',
+                b: 'b2'
+              }
+            ]
+          },
+          body: [
+            {
+              showIndex: true,
+              type: 'input-table',
+              needConfirm: false,
+              perPage: 1,
+              name: 'table',
+              columns: [
+                {
+                  name: 'a',
+                  label: 'A'
+                },
+                {
+                  name: 'b',
+                  label: 'B',
+                  quickEdit: {
+                    type: 'form',
+                    body: [
+                      {
+                        type: 'input-text',
+                        name: 'b'
+                      },
+                      {
+                        type: 'input-text',
+                        name: 'c'
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  await wait(200);
+  const nextBtn = container.querySelector('.cxd-Pagination-next');
+  fireEvent.click(nextBtn!);
+  await wait(200);
+
+  const c = container.querySelector('input[name="c"]');
+  expect(c).toHaveValue('');
+});
diff --git a/packages/amis/src/renderers/Form/InputTable.tsx b/packages/amis/src/renderers/Form/InputTable.tsx
@@ -1876,6 +1876,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
             draggable: draggable && !this.state.editIndex,
             items: items,
             getEntryId: this.getEntryId,
+            reUseRow: false, // 这个会导致 getEntryId 无效，因为复用的话，row 的 id 不会更新
             onSave: this.handleTableSave,
             onRadioChange: this.handleRadioChange,
             onSaveOrder: this.handleSaveTableOrder,