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,
 });