fix(core): fix field default sync exception (#970)

* fix(core): fix default value sync exception * fix(core): fix values changed can not trigger event
alibaba · Jul 17, 2020 · d087281 · d087281
1 parent b78a5cf
commit d087281
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 77 deletions.
diff --git a/docs/zh-cn/schema-develop/form-value.md b/docs/zh-cn/schema-develop/form-value.md
@@ -167,56 +167,3 @@ ReactDOM.render(<App />, document.getElementById('root'))
 - 先点击刷新，后点击重置，点击刷新的时候，initialValues 受表单重渲染而重新更新，aa 字段的初始值更新了，但是因为 aa 当前是有值状态，所以不会被默认值更新所影响
 - 先点击刷新，后点击重置，点击重置按钮的时候，默认是会将值变为初始值，因为初始值变了，所以 aa 字段的值也变了，如果不希望出现这种行为，可以给重置按钮配置强制清空
 - 交替点击清空和刷新按钮，可以重复赋值，是因为初始值一直在变，清空使得字段又恢复到无默认值状态，所以是可以持续赋值的，看着就像前面 value 的效果一样
-
-# InitialValues 覆盖 default
-
-```jsx
-import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
-import {
-  SchemaForm,
-  SchemaMarkupField as Field,
-  FormButtonGroup,
-  Reset
-} from '@formily/antd'
-import { Input } from '@formily/antd-components'
-import { Button } from 'antd'
-import Printer from '@formily/printer'
-import 'antd/dist/antd.css'
-
-const App = () => {
-  const [value, setValue] = useState({
-    aa: 'first render value'
-  })
-  return (
-    <Printer>
-      <SchemaForm
-        initialValues={value}
-        components={{
-          Input
-        }}
-      >
-        <Field type="string" name="aa" x-component="Input" default="123" />
-        <Field type="string" name="bb" x-component="Input" default="321" />
-        <FormButtonGroup>
-          <Button
-            onClick={() => {
-              setValue({
-                aa: Math.random() * 1000 + '',
-                bb: Math.random() * 1000 + ''
-              })
-            }}
-          >
-            刷新
-          </Button>
-          <Reset>重置</Reset>
-          <Reset forceClear>清空</Reset>
-        </FormButtonGroup>
-      </SchemaForm>
-    </Printer>
-  )
-}
-ReactDOM.render(<App />, document.getElementById('root'))
-```
-
-如果字段从未被修改过值，initialValues 会覆盖 default 属性的值，如果已经修改过值，那么无法覆盖
diff --git a/packages/core/src/externals.ts b/packages/core/src/externals.ts
@@ -53,6 +53,7 @@ export const createFormExternals = (
     heart,
     graph,
     validator,
+    upload,
     hostUpdate,
     afterUnmount,
     nextTick,
@@ -225,7 +226,7 @@ export const createFormExternals = (
       if (dirtys.initialized) {
         heart.publish(LifeCycleTypes.ON_FIELD_INIT, field)
       }
-      if (dirtys.value) {
+      if (dirtys.value || dirtys.values) {
         const isArrayList = /array/gi.test(published.dataType)
         if (isArrayList) {
           const prevTags = parseArrayTags(field.prevState.value)
@@ -393,14 +394,20 @@ export const createFormExternals = (
           return form.getState(state => state.editable)
         },
         setValue(name, value) {
-          setFormValuesIn(name, value)
+          upload(() => {
+            setFormValuesIn(name, value)
+          })
         },
         setInitialValue(name, value) {
-          setFormInitialValuesIn(name, value)
+          upload(() => {
+            setFormInitialValuesIn(name, value)
+          })
         },
         removeValue(name) {
           if (!graph.get(nodePath)) return
-          deleteFormValuesIn(name)
+          upload(() => {
+            deleteFormValuesIn(name)
+          })
         },
         getInitialValue(name) {
           return getFormInitialValuesIn(name)

diff --git a/packages/core/src/internals.ts b/packages/core/src/internals.ts
@@ -9,7 +9,8 @@ import {
   isValid,
   isEqual,
   clone,
-  isFn
+  isFn,
+  defaults
 } from '@formily/shared'
 import {
   LifeCycleTypes,
@@ -29,6 +30,11 @@ export const createFormInternals = (options: IFormCreatorOptions = {}) => {
       notifyFormValuesChange()
     }
     if (dirtys.initialValues) {
+      if (!env.uploading) {
+        form.setState(state => {
+          state.values = defaults(published.initialValues, published.values)
+        })
+      }
       notifyFormInitialValuesChange()
     }
     if (dirtys.unmounted && published.unmounted) {
@@ -366,10 +372,16 @@ export const createFormInternals = (options: IFormCreatorOptions = {}) => {
     return true
   }
 
+  function upload(callback: () => void) {
+    env.uploading = true
+    callback()
+    env.uploading = false
+  }
+
   const graph = new FormGraph({
     matchStrategy
   })
-  const form = new Form(options)
+  const form = new Form()
   const validator = new FormValidator({
     ...options,
     matchStrategy
@@ -392,6 +404,7 @@ export const createFormInternals = (options: IFormCreatorOptions = {}) => {
     hostRendering: false,
     publishing: {},
     taskQueue: [],
+    uploading: false,
     taskIndexes: {},
     realRemoveTags: [],
     lastShownStates: {},
@@ -410,6 +423,7 @@ export const createFormInternals = (options: IFormCreatorOptions = {}) => {
     validator,
     heart,
     env,
+    upload,
     nextTick,
     afterUnmount,
     getDataPath,

diff --git a/packages/core/src/models/field.ts b/packages/core/src/models/field.ts
@@ -123,7 +123,6 @@ export const Field = createModel<IFieldState, IFieldStateProps>(
           return true
         }
       }
-
       return !isEqual(currentValue, nextValue)
     }
 
@@ -154,18 +153,11 @@ export const Field = createModel<IFieldState, IFieldStateProps>(
       let initialValue = this.getInitialValueFromProps()
       let formEditable = this.getEditableFromProps()
       if (this.isArrayList()) {
-        value = this.tagArrayList(toArr(value))
-        initialValue = this.tagArrayList(toArr(initialValue))
+        value = toArr(value)
+        initialValue = toArr(initialValue)
       }
-
       const valueChanged = !isEqual(this.state.value, value)
 
-      if (!this.state.inputed) {
-        if (isEqual(value, this.state.initialValue)) {
-          value = initialValue
-        }
-      }
-
       const state = {
         ...this.state,
         initialValue,

diff --git a/packages/core/src/models/form.ts b/packages/core/src/models/form.ts
@@ -5,7 +5,7 @@ import {
   IFormStateProps,
   FormStateDirtyMap
 } from '../types'
-import { toArr, defaults } from '@formily/shared'
+import { toArr } from '@formily/shared'
 import { Draft } from 'immer'
 
 const normalizeMessages = (messages: any) => toArr(messages).filter(v => !!v)
@@ -29,6 +29,12 @@ export const Form = createModel<IFormState, IFormStateProps>(
       unmounted: false
     }
 
+    props: IFormStateProps
+
+    constructor(props: IFormStateProps) {
+      this.props = props
+    }
+
     produce(draft: Draft<IFormState>, dirtys: FormStateDirtyMap) {
       if (dirtys.errors) {
         draft.errors = normalizeMessages(draft.errors)
@@ -48,9 +54,6 @@ export const Form = createModel<IFormState, IFormStateProps>(
           draft.modified = true
         }
       }
-      if (dirtys.initialValues) {
-        draft.values = defaults(draft.initialValues, draft.values)
-      }
       if (dirtys.validating) {
         if (draft.validating === true) {
           draft.loading = true

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -274,15 +274,14 @@ export interface IFormState<FormProps = any> {
 
 export type FormStateDirtyMap = StateDirtyMap<IFormState>
 
-export interface IFormStateProps {
+export type IFormStateProps = {}
+
+export interface IFormCreatorOptions {
   initialValues?: {}
   values?: {}
   lifecycles?: FormLifeCycle[]
   editable?: boolean | ((name: string) => boolean)
   validateFirst?: boolean
-}
-
-export interface IFormCreatorOptions extends IFormStateProps {
   onChange?: (values: IFormState['values']) => void
   onSubmit?: (values: IFormState['values']) => any | Promise<any>
   onReset?: () => void