setFieldsValue 偶现在 getFieldsValue 的时候数据丢失。
1、目前的问题是在渲染的过程中 getFiledValue 被改变了,那么谁会改变这个值呢?
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 验证下
// ============================ 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
下一篇:20230210英语学习