我出現的問題：例如在編輯活動關聯紅包的時候，需求是select顯示的是紅包名稱，但是表單提交的時候是紅包ID：設定預設值的initialValue為Id的時候，會出現顯示是id (需要的是顯示名稱)；如果設定預設值initialValue是名稱，那麼下一步操作會出現報錯

但是我還有一種情況：某個活動關聯的紅包被刪除了，在Select中的可供選項中redPackets沒有這個紅包的時候，顯示的會是紅包id,而不是紅包名稱

錯誤效果圖：

期待正確效果圖

解決方案：在預設值的後面加上一個空字串進行轉換；

      <FormItem {...formItemLayout} label="活動紅包">
       {getFieldDecorator("redPacketId",{
        rules: [{ required: true,message: "紅包必填" }],initialValue: redPacketId + ""
       })(
        <Select>
         {redPackets.map(rp => (
          <Option key={rp.redPacketCommonId}>{rp.packetName}</Option>
         ))}
        </Select>
       )}
      </FormItem>

補充知識：ant 元件initialValue 初始值更新問題，setState和setFieldValue淺談

元件被賦初始值了之後，有兩種情況需要更新元件的value，一種情況是子元件觸發的父元件的value的更新，另一種是父元件自己觸發的value更新。

實現場景

在門票訂購頁面引入了一個遊客資訊子元件，如下圖所示，可以通過子元件新增遊客或刪除遊客來改變訂購數量，也可以通過在訂購頁面批量匯入遊客來改變訂購數量。

 <FormItem {...formItemLayout} label="數量">
  {
   getFieldDecorator('number',{
     rules: [{
      required: true,message: '數量',}],initialValue: this.state.peopleNum
    })(<InputNumber disabled={true} style={{ width: 120,height: 33 }} onChange={this.peopleNumChange} />)
   }
</FormItem>

起初若是子元件觸發的更改就呼叫父元件的回撥函式，函式中使用this.setState({peopleNum})的方法來更新，若是父元件自己觸發的更改就直接呼叫this.setState({peopleNum})來更新InputNumber的值，後來發現state的值更新了，但是並沒有改變InputValue的值，因此就通過 setFieldsValue來解決該問題，發現setFieldsValue直接設定值 比this.setState設定initialvalue的等級更高一點。

 peopleNumChange = (value) => {
  const { setFieldsValue } = this.props.form;
  this.setState({
   peopleNum: value,});
  this.props.form.setFieldsValue({
   number: value,})
 }

ant 自己封裝的table元件initialValue 初始值更新問題

實現場景

在門票訂購頁面引入了一個遊客資訊子元件，如下圖所示，可以通過子元件新增遊客或刪除遊客來直接改變子元件中游客資訊，也可以通過批量匯入遊客資訊的方式間接改變子元件中游客資訊。最後父元件獲取到全部遊客資訊在提交給後臺。

<div style={{ marginTop: 20 }}>
{getFieldDecorator('info',{
initialValue: this.state.info,}
)(<OrderPeople handlepeople={this.peopleNumChange.bind(this)} handlecantact={this.cantactNumChange.bind(this)} />)}
</div>

OrderPeople為封裝的子元件，元件內部有兩個函式，儲存函式和刪除函式，這兩個函式對錶格資料進行更改之後要更新父元件中的遊客資訊，此時父元件會向子元件自動傳遞一個onChange函式，使用onChange函式來更新父元件的Value值，這裡內部實現是用的setFieldValue改變元件的值

remove(key) {
 const newData = this.state.data.filter(item => item.key !== key);
 this.setState({ data: newData });
 this.props.onChange(newData);
}

在元件外部進行批量匯入的時候，對info資料進行修改，起初資料改變之後，在父元件中嘗試setState發現無效，後改成setFieldsValue才生效，元件的值通過setFieldValue置了某個值之後，就不能通過setState改變initialValue來改變其值了。

for (var i = 0; i < data.length; i++) {
  data[i].key = `NEW_Excel_ID_${i}`;
 }
 this.setState({
   info: data,});
setFieldsValue({
  info: this.state.info,});

注意：initialValue設定的值本應該屬於Select可供選的資料中某一個,select框顯示的內容就是我們所希望的紅包名稱，提交form表單的時候，值就是Id；如果設定的值在Select可供選資料中找不到（例如：這裡的select可供選資料是redPackets），那麼顯示的就是Id而不是名稱。

所以我們在設定initialValue的時候，應該填寫的是下拉列表中包含option的value的值。

以上這篇解決ant Design中Select設定initialValue時的大坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。