问题
setFieldsValue 偶现在 getFieldsValue 的时候数据丢失。
分析
1、目前的问题是在渲染的过程中 getFiledValue 被改变了，那么谁会改变这个值呢？
- 数据中有个 appeal_type 的 FiledValue 丢失了
- 问题可能是 setFieldsValue 需要 dom 本身存在
2、查一下 setFieldsValue 的实现机制
数据存在一个 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 组件是什么关系？
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
标签：Form,form,setFieldsValue,component,getFieldsValue,field,blob,com From： https://www.cnblogs.com/yiyi17/p/17107392.html