antd/Form在setFieldsValue 后偶现在 getFieldsValue 的时候数据丢失
创始人
2024-05-24 21:21:23
0

问题

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

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...