ant 元件initialValue 初始值更新問題，setState和setFieldValue淺談

ant input元件initialValue 初始值更新問題

元件被賦初始值了之後，有兩種情況需要更新元件的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,
 });