antd动态删除/增加form表单带来的bug

时间:2024-03-23 07:41:02

需求背景:上传一组图片,每张图片都可配置跳转链接开关,类型,url地址等,可编辑。图片删除后对应的配置都变为初始状态。

由于上传图片用的公共组件,此组件内不能插入其他代码,所以我就直接遍历了图片组的长度,动态生成N个配置项。

删除图片的操作是在公共组件传的方法内,删除图片的同时要删除对应的配置项,所以在这个方法内要写删除配置项的代码。

实现很好实现,直接匹配图片url与配置项里的图片url是否相同。

我遇到的问题是删除form表单某一项后再添加一组新的表单,会把上次删除了的value值带出来。删除操作完成后render里取到的值已经是正确的,在上传图片的回调里获取这组值的时候却总有之前的值。甚至手动setFieldsValue后页面还是不变,虽然render打印的是正确的。查了半天才知道原来是默认值initialValue的问题。删除操作完重新setFieldsValue之后,还需要把默认值重置,否则表单显示的一直是initialValue。具体代码见贴图

antd动态删除/增加form表单带来的bugantd动态删除/增加form表单带来的bug