antd/Form在setFieldsValue 后偶现在 getFieldsValue 的时候数据丢失

问题

setFieldsValue 偶现在 getFieldsValue 的时候数据丢失。

分析

1、目前的问题是在渲染的过程中 getFiledValue 被改变了，那么谁会改变这个值呢？

• 数据中有个 appeal_type 的 FiledValue 丢失了
• 问题可能是 setFieldsValue 需要 dom 本身存在

2、查一下 setFieldsValue 的实现机制

https://github.com/react-component/field-form/blob/d7892873e9eee6e4c618d4289fcdbc9ee240f68f/src/utils/valueUtil.ts#L75

https://github.com/react-component/field-form/blob/d7892873e9eee6e4c618d4289fcdbc9ee240f68f/src/useForm.ts#L543

数据存在一个 store，那么和 当前 DOM 有没有关系呢？需要弄个demo 验证下

• 确实需要DOM 存在才行，在 field-form 这看到这样的过滤机制，https://github.com/react-component/field-form/blob/d7892873e9eee6e4c618d4289fcdbc9ee240f68f/src/useForm.ts#L238

// ============================ Fields ============================
 /**
  * Get registered field entities.
 * @param pure Only return field which has a `name`. Default: false  */ private getFieldEntities = (pure: boolean = false) => { if (!pure) { return this.fieldEntities; } return this.fieldEntities.filter(field => field.getNamePath().length); }; 

收集 this.fieldEntities 是在 registerField 中，收集dom 并实现数据的双向绑定this.notifyWatch([namePath])看上去和 vue 很像。

但是仍然还没有找到 DOM 的收集过程，需要查一下 andt/form 的实现(整个过程快水落石出了)

3、registerField 的执行时机

原来收集的过程是在 Field 的 componentDidMount 中执行了 registerField 的方法，那么 Field 组件和 FormItem 组件是什么关系？

https://github.com/react-component/field-form/blob/d7892873e9eee6e4c618d4289fcdbc9ee240f68f/src/Field.tsx#L161

public componentDidMount() {
  const { shouldUpdate, fieldContext } = this.props; this.mounted = true; // Register on init  if (fieldContext) { const { getInternalHooks }: InternalFormInstance = fieldContext; const { registerField } = getInternalHooks(HOOK_MARK); this.cancelRegisterFunc = registerField(this); } // One more render for component in case fields not ready  if (shouldUpdate === true) { this.reRender(); } } 

原来 FormItem 就是对 Field 的封装：https://github.com/ant-design/ant-design/blob/master/components/form/FormItem/index.tsx#L247

那么问题也就水落石出了

结论

setFieldsValue 是依赖 FormItem 的 componentDidMount