在React里边使用antd 的 Select defaultValue失效

首先第一个问题，defaultValue为什么失效

因为react的生命周期执行顺序是，componentWillMount , render, componentDidMount
render执行的时候，defaultValue应该已经赋值完毕（这个提前赋值的形式比较多，可以在class以外赋值，可以在state初始化时赋值，也可以在componentWillMount 里赋值，也可以在render头部赋值等等等等），如此才能生效

第二个问题，我们将defaultValue设置为state动态值时，state变化，defaultValue不变化

defaultValue只会在render时执行一次，然后再怎么设置都不会变化，当我们的业务需要select多次刷新数据且需要重置数据时，应该将defaultValue替换为value,如下所示

class case extends Component {

  constructor(props) {
    this.state = {
		value:""
    }
  }
  
  onChange= (val) => {
	this.setState({
		value: val
	})
  }

  render() {
    return <div >
	  <Select
	    value={this.state.value}
	    onChange={this.onChange}
	  >
	    <Option value="jack">Jack</Option>
	    <Option value="lucy">Lucy</Option>
	  </Select>,
    </div>;
  }
}

第三个问题，假如我们使用antd的Form双向绑定getFieldDecorator,我们的数据很可能是动态的，那我们怎么才能获取初始value呢？

现在我们用代码模拟实现一下,来个稍微完整的案例，Form

import React from "react"
import { Form } from "antd"
 
class case extends React.Component {

  constructor(props) {
    this.state = {
		list:[]
    }
  }
  
  componentDidMount(){
	setTimeout(()=>{
		this.setState({
			list:[
			{ text: "选项一", value: 1 },
			{ text: "选项二", value: 2 },
			]
		})
	},2000)
  }
 
  render() {
  	const {list} = this.state;
  	const { form: { getFieldDecorator }} = this.props;
    return <Form >
	    <Form.Item>
		    {list.length > 0 && getFieldDecorator('select', {
				initialValue: list.length > 0 ? list[0].value : "", // 这里可以设置一个初始值
				rules: [ { required: true , message: "选项不能为空！"}]
			})(
			 <Select>
				    list.map( item =>  <Option key={item.value} value={item.value}>{item.text}</Option>)
			</Select>
			)}
		</Form.Item>
    </Form >;
  }
}

export default Form.create()(case)

完了