antd of vue 动态增减表单项，设置初始值

太过爱你忘了你带给我的痛 2023-07-08 11:26 149阅读 0赞

## 场景 ##

我这边的需求是修改表单，里面有一项是动态增减表单的，初始值有个问题：我是异步获取的数据，获取到数据之后用**setFieldsValue**给Form表单赋初值时，一直报错，报错如下：

> Warning: You cannot set a form field before rendering a field associated with the value.  
> 警告：在呈现与值关联的字段之前，不能设置窗体字段。

也就是说当我赋初值的时候，Form表单中并没有相关联的字段  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70]

created(){
    	this.form = this.$form.createForm(this);
    	...then((keys) = > {
    		this.form.getFieldDecorator('keys', { initialValue: keys, preserve: true });
    		this.form.setFieldsValue(this.defaultStrategy)
    	})
    }

## 证实猜想 ##

为了证实是因为**异步获取数据**导致的问题,我把官方的例子拿过来做了测试，这里放我修改的片段，其他的代码可以自行跳转查看  
[动态增减表单][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 1]运行之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 2]

## 模拟实际场景 ##

我在官方的例子代码基础上，用settimeout做了一个异步的模拟  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 3]  
看到这里，相信不运行，你们也都能看出问题了吧，按照这样写的话，肯定先执行beforeCreate的第一行代码，接着执行setFieldsValue中的代码，最后才执行setTimeout中的getFieldDecorator,这样写肯定有问题的。  
那有人可能会想，把setFieldsValue那句放到getFieldDecorator后面，实验证明，这样是行不通的，就算不是异步，都是不行的，运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 4]输入框显示了，但是参数没有显示出来，并且控制台报错

> Warning: You cannot set a form field before rendering a field associated with the value.  
> 警告：在呈现与值关联的字段之前，不能设置窗体字段。

这个时候，我大胆猜测，在执行setFieldsValue的时候，上一句getFieldDecorator还没执行完，三个输入框，还没有显示出来，所以执行setFieldsValue的时候报错了，报完错之后界面出来了，就这样完美错开。  
**也就是说我们要保证getFieldDecorator语句执行完之后，再执行setFieldsValue，这样就能解决**。那怎么确保getFieldDecorator语句执行完成呢？

## nextTick ##

先看下官方描述  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 5]我很简单地去理解这个东西，也就是说DOM更新的时候就执行nextTick中的方法，那不就刚好是我想要的吗，input渲染出来之后再执行setFieldsValue，那就试试，于是改了代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 6]运行之后还是不行，跟没有加的效果一样。这种时候换个角度想，nextTick在下次更新循环结束后执行延迟回调，修改数据之后立即使用该方法，于是机智的我，加了个隐藏表单的变量：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 7]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 8]  
运行之后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 9]居然成功了，真是感动又意外啊。为了找出原因。我把nextTick去掉了，但是又报错，还是上面那个错误，也就是说隐藏变量和nextTick两个都是不可或缺的。

## 应用及总结 ##

可喜可乐，按照这种方法之后，异步请求数据也不怕出不来初始值了，解决之后我一直在想为什么单独nextTick不能实现，因为它本身就是DOM更新后执行的，回到那个报错，我猜想可能是执行getFieldDecorator的时候，因为异步数据的缘故，虽然从界面上看出现了三个input项，但是可能没有触发Form的更新，而增加一个变量控制样式的隐藏和显示恰好触发了Form的更新，所以用setFieldsValue才不再报错，并且完美显示。

先继续完成功能，这个要去看下antd的源码才能证实我的猜想，或者有大神可以不吝赐教就更好啦！文中有错误好好说，不要喷我，世界和平！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200226143826488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[Link 1]: https://www.antdv.com/components/form-cn/#components-form-demo-dynamic-form-item
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200226150429479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200226150455591.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200226154208810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200226155050578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020022616141296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200226162315371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200226163435928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200226164206709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200226163645957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw==,size_16,color_FFFFFF,t_70