[Antd-vue] Warning: You cannot set a form field before rendering a field associated with the value.

在用ant-design-vue的框架中，使用到了这种场景，就是点击编辑按钮，弹出modal模态框，渲染modal模态框中的form表单页面，并给表单赋值，但是在给表单赋值的时候，总是会报错。

错误提示： Warning: You cannot set a form field before rendering a field associated with the value.

经过一番查找后发现，造成这种原因一般有以下几个原因：

1.使用了表单的方法setFieldsValue()，来设置一组输入控件的值，传入的值为object，但是传入的值要和表单的值一一对应，能少传不能多传。

遇到这种情况的解决方式为：form渲染需要什么值你就传什么值

方式1：一个一个传

 this.form.setFieldsValue({ note: '123', mark: '456' })

方式2：

add (record) {  //record:需要引用的值

   this.visible = true

   this.mdl = Object.assign({}, record)  // 浅拷贝

   this.form.setFieldsValue(pick(this.mdl, 'note', 'mark'))  // loadsh的pick方法

}

但是你会发现这么些还是报同样的错误。按照错误提示的原意：不能在表单渲染之前赋值

2.调用setFieldsValue()方法，需要放在$nextTick()函数中执行，改为如下即可：

this.$nextTick(()=>{

    this.form.setFieldsValue(pick(this.mdl, 'note', 'mark'))  // loadsh的pick方法

})

一般到这里就能解决问题了，如果还在报同样的错误，那就这样吧：

3.再放到setTimeout()方法中

this.$nextTick(() => {

     setTimeout(() => {

     this.form.setFieldsValue(pick(this.mdl, 'note', 'mark'))  // loadsh的pick方法

     })

})

巴特西

[Antd-vue] Warning: You cannot set a form field before rendering a field associated with the value.

最新文章

热门文章