fix(react): fix field wrong mounted state (#3181)

packages/react/src/__tests__/field.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { act } from 'react-dom/test-utils'
 import { render, fireEvent, waitFor } from '@testing-library/react'
-import { createForm, onFieldUnmount } from '@formily/core'
+import { createForm, onFieldUnmount, isArrayField } from '@formily/core'
 import {
   isField,
   Field as FieldType,
@@ -33,7 +33,7 @@ type CustomProps = {
   list?: string[]
 }
 
-const Decorator: React.FC = (props) => <div>{props.children}</div>
+const Decorator = (props) => <div>{props.children}</div>
 const Input: React.FC<React.PropsWithChildren<InputProps>> = (props) => (
   <input
     {...props}
@@ -147,6 +147,47 @@ test('useAttach', () => {
   expect(form.query('bb').take().mounted).toBeTruthy()
 })
 
+test('useAttach with array field', async () => {
+  const form = createForm()
+  const MyComponent = () => {
+    return (
+      <FormProvider form={form}>
+        <ArrayField
+          name="array"
+          initialValue={[{ input: '11' }, { input: '22' }]}
+        >
+          {(field) => {
+            return field.value.map((val, index) => {
+              return (
+                <Field
+                  key={index}
+                  name={index + '.input'}
+                  decorator={[Decorator]}
+                  component={[Input]}
+                />
+              )
+            })
+          }}
+        </ArrayField>
+      </FormProvider>
+    )
+  }
+  render(<MyComponent />)
+  await waitFor(() => {
+    expect(form.query('array.0.input').take().mounted).toBeTruthy()
+    expect(form.query('array.1.input').take().mounted).toBeTruthy()
+  })
+  form.query('array').take((field) => {
+    if (isArrayField(field)) {
+      field.moveDown(0)
+    }
+  })
+  await waitFor(() => {
+    expect(form.query('array.0.input').take().mounted).toBeTruthy()
+    expect(form.query('array.1.input').take().mounted).toBeTruthy()
+  })
+})
+
 test('useFormEffects', async () => {
   const form = createForm()
   const CustomField = observer(() => {

packages/react/src/__tests__/schema.markup.spec.tsx

@@ -107,7 +107,7 @@ describe('markup schema field', () => {
   })
   test('void', () => {
     const form = createForm()
-    const VoidComponent: React.FC = (props) => {
+    const VoidComponent = (props) => {
       return <div data-testid="void-component">{props.children}</div>
     }
     const SchemaField = createSchemaField({
@@ -178,7 +178,7 @@ describe('markup schema field', () => {
   })
   test('props children', () => {
     const form = createForm()
-    const Text: React.FC = (props) => {
+    const Text = (props) => {
       return <div data-testid="children-test">{props.children}</div>
     }
     const SchemaField = createSchemaField({
@@ -201,7 +201,7 @@ describe('markup schema field', () => {
   })
   test('x-content', () => {
     const form = createForm()
-    const Text: React.FC = (props) => {
+    const Text = (props) => {
       return <div data-testid="content-test">{props.children}</div>
     }
     const SchemaField = createSchemaField({

packages/react/src/hooks/useAttach.ts

@@ -1,21 +1,14 @@
-import { useRef, useEffect } from 'react'
+import { useEffect } from 'react'
 
 interface IRecycleTarget {
   onMount: () => void
   onUnmount: () => void
 }
 
 export const useAttach = <T extends IRecycleTarget>(target: T): T => {
-  const oldTargetRef = useRef<IRecycleTarget>(null)
   useEffect(() => {
-    if (oldTargetRef.current && target !== oldTargetRef.current) {
-      oldTargetRef.current.onUnmount()
-    }
-    oldTargetRef.current = target
     target.onMount()
-    return () => {
-      target.onUnmount()
-    }
+    return () => target.onUnmount()
   }, [target])
   return target
 }

packages/react/src/types.ts

@@ -28,7 +28,7 @@ export interface IFormSpyProps {
 }
 
 export type RenderPropsChildren<Payload> =
-  | ((field: Payload, form: Form) => ReactChild)
+  | ((field: Payload, form: Form) => React.ReactNode)
   | React.ReactNode
 
 export interface IFieldProps<