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

问题

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

分析

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

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

2、查一下 setFieldsValue 的实现机制

数据存在一个 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 组件是什么关系？

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 的封装：

那么问题也就水落石出了

结论

setFieldsValue 是依赖 FormItem 的 componentDidMount

 

 

posted @ 2023-02-09 22:36  地铁程序员  阅读(231)  评论(0)  编辑  收藏  举报