react給表單賦值警告You cannot set a form field before rendering a field associated with the value

出現原因：賦值給表單，可以少傳值，不能多傳值

　　由於表單中的圖片上傳是另外的組件  所以賦值時是需要傳給子組件去賦值，不能setFieldsValue

 

在用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方法
     })
})

 

 

原文鏈接：https://www.cnblogs.com/cirry/p/12483131.html