fix(react): fix field unmounted but can not update right model (#3994)

* fix(react): fix field unmounted but can not update right model

* fix: fix workflow

* fix: fix workflow

* fix: fix workflow

* fix: fix workflow

* fix: fix ci

Author: janryWang

.github/workflows/ci.yml

@@ -10,18 +10,14 @@ on:
 
 jobs:
   build:
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
     if: contains(github.event.head_commit.message, 'chore(versions)') == false
-    strategy:
-      matrix:
-        node_version: 16
-        os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js ${{ matrix.node_version }}
+      - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node_version }}
+          node-version: 16
 
       - run: yarn -v
       - run: yarn --ignore-engines

packages/core/src/__tests__/form.spec.ts

@@ -1713,3 +1713,11 @@ test('form initial values ref should not changed with setInitialValues', () => {
   })
   expect(form.initialValues === values).toBeTruthy()
 })
+
+test('form query undefined query should not throw error', () => {
+  const form = attach(createForm())
+
+  ;(form.fields as any)['a'] = undefined
+  expect(() => form.query('*').take()).not.toThrowError()
+  expect(Object.keys(form.fields)).toEqual([])
+})

packages/react/src/components/Field.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useField, useForm } from '../hooks'
-import { useAttach } from '../hooks/useAttach'
 import { ReactiveField } from './ReactiveField'
 import { FieldContext } from '../shared'
 import { JSXComponent, IFieldProps } from '../types'
@@ -10,9 +9,13 @@ export const Field = <D extends JSXComponent, C extends JSXComponent>(
 ) => {
   const form = useForm()
   const parent = useField()
-  const field = useAttach(
-    form.createField({ basePath: parent?.address, ...props })
-  )
+  const field = form.createField({ basePath: parent?.address, ...props })
+  useEffect(() => {
+    field?.onMount()
+    return () => {
+      field?.onUnmount()
+    }
+  }, [field])
   return (
     <FieldContext.Provider value={field}>
       <ReactiveField field={field}>{props.children}</ReactiveField>