New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix dynamic render of fields with same name #117

Merged
merged 11 commits into from Nov 22, 2017

Conversation

Projects
None yet
8 participants
@afc163
Member

afc163 commented Nov 16, 2017

Consider this situation which is used to throw error when change this.state.useInput:

{this.state.useInput ? getFieldDecorator('name')(<input />) : null}
<span>text content</span>
{this.state.useInput ? null : getFieldDecorator('name')(<input />)}

close #100
close #53
close ant-design/ant-design#4460
close ant-design/ant-design#4367
close ant-design/ant-design#6117
close ant-design/ant-design#7302
close ant-design/ant-design#7589
close ant-design/ant-design#4478

@afc163 afc163 requested a review from benjycui Nov 16, 2017

afc163 added some commits Nov 16, 2017

@coveralls

This comment has been minimized.

coveralls commented Nov 17, 2017

Coverage Status

Coverage remained the same at 92.698% when pulling 47fb573 on feat-dynamic-field-binding into 08d3c15 on master.

@coveralls

This comment has been minimized.

coveralls commented Nov 17, 2017

Coverage Status

Coverage remained the same at 92.698% when pulling 20bc23c on feat-dynamic-field-binding into 08d3c15 on master.

@afc163

This comment has been minimized.

Member

afc163 commented Nov 17, 2017

  • 还需要补充用例。
this.fieldsMeta[name] = this.fieldsMeta[name] || [];
this.fieldsMeta[name].unshift();
if (this.fieldsMeta[name].length === 0) {
delete this.fields[name];

This comment has been minimized.

@benjycui

benjycui Nov 17, 2017

Member

这里的问题在于,当用户切换表单组件时,是否该保留之前的表单组件的校验信息和值。

@benjycui

This comment has been minimized.

Member

benjycui commented Nov 17, 2017

还有个 getFieldInstance API 的,这样虽然切换没问题,但是 getFieldInstance 时会拿到 undefined.

form/src/createBaseForm.js

Lines 290 to 291 in 08d3c15

delete this.instances[name];
delete this.cachedBind[name];

@benjycui

This comment has been minimized.

Member

benjycui commented Nov 17, 2017

虽然单测没挂,但之前的单测都没有考虑动态切换组件会导致的情况。

所以补充单测时,需要梳理对已有的 API 的可能影响,然后都补充单测。之前 nested field 就是没有考虑到对已有 API 的影响才爆了那么多的问题。

@afc163

This comment has been minimized.

Member

afc163 commented Nov 17, 2017

下面立刻就绑定了,这里应该没有修改之前的逻辑。

this.instances[name] = component;

afc163 added some commits Nov 17, 2017

@afc163

This comment has been minimized.

Member

afc163 commented Nov 17, 2017

@benjycui

This comment has been minimized.

Member

benjycui commented Nov 20, 2017

下面立刻就绑定了,这里应该没有修改之前的逻辑。

这个 PR 是要解决先 B mount 再 A unmount 的问题,在 A unmount 时就会删除引用了。

@afc163

This comment has been minimized.

Member

afc163 commented Nov 21, 2017

image

无论是 react 15 还是 16,在同一次 render 过程中均是先 unmount 再 mount,顺序是触发 getFieldProps => unmount saveRef => mount saveRef.

afc163 added some commits Nov 21, 2017

});
this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta);
}
delete this.clearedFieldMetaCache[name];

This comment has been minimized.

@afc163

afc163 Nov 21, 2017

Member

换了一个思路做,unmount 的时候留一个缓存。如果相同的 name 再次注册,则恢复现场。

@benjycui

@afc163 afc163 changed the title from [WIP] Fix dynamic render of fields with same name to Fix dynamic render of fields with same name Nov 22, 2017

@afc163 afc163 merged commit 50673f9 into master Nov 22, 2017

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@afc163 afc163 deleted the feat-dynamic-field-binding branch Nov 22, 2017

@HunDunDM

This comment has been minimized.

Contributor

HunDunDM commented Dec 14, 2017

resetFields

resetFields需要清除clearedFieldMetaCache中对应的缓存

ref

clearedFieldMetaCache缓存的获取时机不应该在ref函数中,而应该在getFieldProps函数中。
否则首次render时,getFieldProps并不会获得cache中的数据,而是在render后,ref函数中才会获得cache。而此时不触发rerender,需要等到下一次render时,才会生效。

@Skandar-Ln

This comment has been minimized.

Skandar-Ln commented Feb 9, 2018

我看到在这个简单例子里,替换组件的触发顺序是先 mount 再 unmount @afc163
https://codepen.io/Skandar/pen/WMRmgm

@jaredleechn

This comment has been minimized.

Member

jaredleechn commented Feb 27, 2018

这个修改可以同步到 form@1.x 吗?在用 antd@2,一些动态 fields 的值在提交时无法获取,很头痛

@zackshen

This comment has been minimized.

zackshen commented Apr 20, 2018

@jaredleechn 同求

@sun-slaven

This comment has been minimized.

sun-slaven commented Apr 27, 2018

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment