From 9107e86cf435e2f27886854634e06e5d7ca36a64 Mon Sep 17 00:00:00 2001
From: Janry <zhili.wzl@alibaba-inc.com>
Date: Mon, 11 Jul 2022 11:46:46 +0800
Subject: [PATCH] fix(antd/next): fix array components lose reactive (#3266)

---
 packages/antd/src/array-cards/index.tsx    | 2 +-
 packages/antd/src/array-collapse/index.tsx | 5 ++++-
 packages/antd/src/array-items/index.tsx    | 2 +-
 packages/antd/src/array-table/index.tsx    | 8 ++++----
 packages/next/src/array-cards/index.tsx    | 2 +-
 packages/next/src/array-collapse/index.tsx | 2 +-
 packages/next/src/array-items/index.tsx    | 2 +-
 packages/next/src/array-table/index.tsx    | 8 ++++----
 8 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/antd/src/array-cards/index.tsx b/packages/antd/src/array-cards/index.tsx
index 0ac97885c3e..a926a211110 100644
--- a/packages/antd/src/array-cards/index.tsx
+++ b/packages/antd/src/array-cards/index.tsx
@@ -106,7 +106,7 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         <ArrayBase.Item
           key={index}
           index={index}
-          record={() => dataSource[index]}
+          record={() => field.value?.[index]}
         >
           <Card
             {...props}
diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
index f3895e5d83d..2a58d6751ca 100644
--- a/packages/antd/src/array-collapse/index.tsx
+++ b/packages/antd/src/array-collapse/index.tsx
@@ -140,7 +140,10 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 address: `${path}.**`,
               })
               return (
-                <ArrayBase.Item index={index} record={() => dataSource[index]}>
+                <ArrayBase.Item
+                  index={index}
+                  record={() => field.value?.[index]}
+                >
                   <RecursionField
                     schema={items}
                     name={index}
diff --git a/packages/antd/src/array-items/index.tsx b/packages/antd/src/array-items/index.tsx
index 92af2d00841..a6f4afac02d 100644
--- a/packages/antd/src/array-items/index.tsx
+++ b/packages/antd/src/array-items/index.tsx
@@ -99,7 +99,7 @@ export const ArrayItems: ComposedArrayItems = observer((props) => {
               <ArrayBase.Item
                 key={index}
                 index={index}
-                record={() => dataSource[index]}
+                record={() => field.value?.[index]}
               >
                 <SortableItem key={`item-${index}`} index={index}>
                   <div className={`${prefixCls}-item-inner`}>
diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
index a44486254cf..ff6283cf5eb 100644
--- a/packages/antd/src/array-table/index.tsx
+++ b/packages/antd/src/array-table/index.tsx
@@ -122,7 +122,7 @@ const useArrayTableSources = () => {
 }
 
 const useArrayTableColumns = (
-  dataSource: any[],
+  field: ArrayField,
   sources: ObservableColumnSource[]
 ): TableProps<any>['columns'] => {
   return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
@@ -133,9 +133,9 @@ const useArrayTableColumns = (
       key,
       dataIndex: name,
       render: (value: any, record: any) => {
-        const index = dataSource.indexOf(record)
+        const index = field?.value?.indexOf(record)
         const children = (
-          <ArrayBase.Item index={index} record={() => dataSource[index]}>
+          <ArrayBase.Item index={index} record={() => field?.value?.[index]}>
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
         )
@@ -295,7 +295,7 @@ export const ArrayTable: ComposedArrayTable = observer(
     const prefixCls = usePrefixCls('formily-array-table')
     const dataSource = Array.isArray(field.value) ? field.value.slice() : []
     const sources = useArrayTableSources()
-    const columns = useArrayTableColumns(dataSource, sources)
+    const columns = useArrayTableColumns(field, sources)
     const pagination = isBool(props.pagination) ? {} : props.pagination
     const addition = useAddition()
     const defaultRowKey = (record: any) => {
diff --git a/packages/next/src/array-cards/index.tsx b/packages/next/src/array-cards/index.tsx
index 16cb5af9c57..ac1932f6b8c 100644
--- a/packages/next/src/array-cards/index.tsx
+++ b/packages/next/src/array-cards/index.tsx
@@ -159,7 +159,7 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         <ArrayBase.Item
           key={index}
           index={index}
-          record={() => dataSource[index]}
+          record={() => field.value?.[index]}
         >
           <Card
             contentHeight="auto"
diff --git a/packages/next/src/array-collapse/index.tsx b/packages/next/src/array-collapse/index.tsx
index 5358aa66b79..a9da2c03ab8 100644
--- a/packages/next/src/array-collapse/index.tsx
+++ b/packages/next/src/array-collapse/index.tsx
@@ -195,7 +195,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 <ArrayBase.Item
                   index={index}
                   key={index}
-                  record={() => dataSource[index]}
+                  record={() => field.value?.[index]}
                 >
                   {content}
                 </ArrayBase.Item>
diff --git a/packages/next/src/array-items/index.tsx b/packages/next/src/array-items/index.tsx
index b730927b740..adb7621a020 100644
--- a/packages/next/src/array-items/index.tsx
+++ b/packages/next/src/array-items/index.tsx
@@ -99,7 +99,7 @@ export const ArrayItems: ComposedArrayItems = observer((props) => {
               <ArrayBase.Item
                 key={index}
                 index={index}
-                record={() => dataSource[index]}
+                record={() => field.value?.[index]}
               >
                 <SortableItem key={`item-${index}`} index={index}>
                   <div className={`${prefixCls}-item-inner`}>
diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx
index b52bb2a66aa..58d78589e60 100644
--- a/packages/next/src/array-table/index.tsx
+++ b/packages/next/src/array-table/index.tsx
@@ -120,7 +120,7 @@ const useArrayTableSources = () => {
 }
 
 const useArrayTableColumns = (
-  dataSource: any[],
+  field: ArrayField,
   sources: ObservableColumnSource[]
 ): TableProps['columns'] => {
   return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
@@ -131,12 +131,12 @@ const useArrayTableColumns = (
       key,
       dataIndex: name,
       cell: (value: any, _: number, record: any) => {
-        const index = dataSource.indexOf(record)
+        const index = field.value?.indexOf(record)
         const children = (
           <ArrayBase.Item
             key={index}
             index={index}
-            record={() => dataSource[index]}
+            record={() => field.value?.[index]}
           >
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
@@ -299,7 +299,7 @@ export const ArrayTable: ComposedArrayTable = observer(
     const prefixCls = usePrefixCls('formily-array-table')
     const dataSource = Array.isArray(field.value) ? field.value.slice() : []
     const sources = useArrayTableSources()
-    const columns = useArrayTableColumns(dataSource, sources)
+    const columns = useArrayTableColumns(field, sources)
     const pagination = isBool(props.pagination) ? {} : props.pagination
     const addition = useAddition()