这几天开始react的开发，用的是antd的组件，因为不熟悉react也不熟悉antd，今天踩了不少坑，其中很多是Select组件的，故做一下总结。

1. antd select组件单选下拉框defaultValue失效

   代码如下

<FormItem {...formItemLayout} label="回访人员">
  {getFieldDecorator('visit_user_id', {
	initialValue: this.state.visit_user_id,
	rules: [{
	  required: false,
	}],
  })(
	<Fragment>
	  <Select
		placeholder="请选择"
		style={{ width: '50%' }}
		defalutValue={this.state.visit_user_id}
		onChange={(v) => this.setState({visit_user_id: v})}
	  >
		{
		  this.state.parkAdminList.length && this.state.parkAdminList.map((v, i) => {
		    <Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>
		  })
		}
	  </Select>
	</Fragment>
	)
  }
</FormItem>

【问题1】：页面报错Uncaught TypeError: Cannot use 'in' operator to search for 'vaulue' in undefind，console中只报第三方库的错误，没有显示自己写的代码错误在哪。

【解决1】：经过逐步排查，发现当到这个Select组件时出现错误。经过查找得知，这种循环渲染Option的写法很常用，但存在一个问题，当this.state.parkAdminList为空[]时，this.state.parkAdminList.length后面的this.state.parkAdminList.map没有执行，Select标签为<Select>{ undefined }</Select>导致报错，而Select可为<Select><option value="1">选择</option></Select> ，或者 <Select>{ null }</Select>。

修改代码如下

{
    this.state.parkAdminList.length ? this.state.parkAdminList.map((v, i) => {
	return (
		<Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>
	);
    }) : null
}

或

{
    this.state.parkAdminList.length ? this.state.parkAdminList.map((v, i) => {
	return (
		<Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>
	);
    }) : <Option value=''>请选择</Option>
}

【问题2】：在默认模式——单选模式下，当Select的defaultValue属性设置为{this.state.visit_user_id}或{1}时，没有匹配到对应的Option；当直接设置defaultValue属性为'1'时，可以默认显示选中的Option。

【解决2】：查看文档之后，原来还有Select另一个属性value，改用value之后便正常。

修改代码如下

<Select
      placeholder="请选择"
      style={{ width: '50%' }}
      value={this.state.visit_user_id}
      onChange={(v) => this.setState({visit_user_id: v})}
>

【疑惑】：只是不清楚为什么defaultValue={'1'}时却可正常显示？

2. antd select组件多选下拉框defaultVaule失效

   代码如下

   <FormItem {...formItemLayout} label="订单完成后通知处理人员">
     {getFieldDecorator('notice_user_id', {
           initialValue: this.state.notice_user_id,
       })(
       <Fragment>
           <Select
               mode="multiple"
               placeholder="请选择"
               style={{ width: '49%' }}
               value={this.state.notice_user_id}
               onChange={this.handleNoticeUserChange}
           >
               {
                   this.state.parkAdminList.length ? this.state.parkAdminList.map((v, i) => {
                       return (
                           <Option key={`${i}`}>{`${v.real_name} ${v.position}`}</Option>
                       );
                   }) : null
               }
           </Select>
       </Fragment>
       )
     }
   </FormItem>

   【问题3】：在设置Select的value属性后，下拉框直接显示this.state.visit_user_id，没有显示对应选中的Option。

   【解决3】：原来是Option标签中没有设置value属性的值，Select的value无法与Option的value绑定。

   修改代码如下

   <Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>

   【问题4】：在Select组件为mode="multiple"（多选模式）下，设置Select的value属性后，可默认选中Option，但却无法修改。
   【解决4】：多选模式下Select的value是固定选中的值，defaultValue才是初始选中的值，改用defaultValue之后便正常。

   修改代码如下

   <Select
          mode="multiple"
          placeholder="请选择"
          style={{ width: '49%' }}
          defalutValue={this.state.notice_user_id}
          onChange={this.handleNoticeUserChange}
   >

以上今天写react时遇到跟antd Select组件相关的问题，特此记录。