對表單進行了雙向綁定卻`setFieldsValue`失敗

---

標簽: react, ant design組件

需求

管理后台，點擊編輯對應的條目之后，彈出修改框，希望彈出框中預設條目中原來的值

enter description here

實現難點

對表單的輸入框進行雙向綁定之后使用setFieldsValue卻只給了下面的贈送欄賦初始值，並且報錯

Warning: Cannot use setFieldsValue until you use getFieldDecorator or getFieldProps to register it.

思路分析

• 問題剖析：由於彈框中顯示的項目是按條件渲染出來的，不同類型的條目有不同的編輯項，所以對於設置條件渲染的部分不能進行form雙向綁定，不管是不是滿足判斷條件，都無法正常綁定
• 思路轉換：
  • 思路一：不改變setFieldsValue，從實現雙向綁定的角度來實現
    • 將滿足條件才渲染dom，改成滿足條件就隱藏，將需要隱藏的部分包裹在一個盒子里面，使用`display`來控制盒子的顯隱。這樣一來在加載頁面的時候dom就是存在的，這樣就可以進行雙向綁定了。
  • 思路二：依然是條件渲染，但是在對表單中的值進行set的時候要分條件去處理，需要set哪些才去處理

思路一的代碼實現

1.原始代碼

 

 

• render()中的部分表單，這個FormItem的顯示與否是由this.state.ruleType 的值來控制
  html<br />{console.log("this.state.ruleType "+this.state.ruleType)}<br />/*條件渲染/<br /> {this.state.ruleType === 'CONSUMPTION' &amp;&amp; ( <br /> {getFieldDecorator('ruleConsumptionType', { rules: customRules, // initialValue: this.state.ruleConsumptionType, })(<select "="">娃娃機按摩椅 )} <br /> )}</li> </ul> ¨G0G javascript handleRowEditClick = async (index, record) => { console.log(record) const { ruleConsumptionType, ruleCount, } = record ¨K17K ¨G1G html ¨K2K

   

  注意事項

  1.setState是異步的，設置后直接取state的值需要再回調函數里面去取，但是頁面上的state就已經是更新成對應的值了
  使用了setState和setFieldsValue兩種方式分別設置State和表當中名為ruleType輸入框的值
  setState是異步的所以顯示為空，而表單中的不是

  錯誤信息打印

  2.在FormItem被隱藏時，輸入框可能為空，這個時候就要對校驗字段進行篩選，確定在什么情況下需要交驗哪些字段，否則會導致校驗不通過不能夠提交表單
  

  enter description here

  3.在寫頁面邏輯時用了很多的setState和setFieldsValue適度選則，不要濫用，據說setState會影響頁面性能，待商榷

  作者簡介：饒堯，蘆葦科技web前端開發工程師，擅長網站建設、微信公眾號開發、微信小程序開發、小游戲制作、企業微信制作、H5建設，專注於前端框架、交互設計、圖像繪制、數據分析等研究。

  歡迎和我們一起並肩作戰： [e-mail]
  訪問 www.talkmoney.cn 了解更多

  提供專業的微信公眾號建設，高質量的釘釘制作，高性價比的企業微信制作，廣州微信小程序制作，靠譜的小游戲外包，深圳H5外包