antd, Select, Option动态变更时，仍能选中预置值

Question

根据Select的官方实例

import { Select } from 'antd';
const Option = Select.Option;

function handleChange(value) {
  console.log(value);  // { key: "lucy", label: "Lucy (101)" }
}

ReactDOM.render(
  <Select labelInValue defaultValue={{ key: 'lucy' }} style={{ width: 120 }}>
    <Option value="jack">Jack (100)</Option>
    <Option value="lucy">Lucy (101)</Option>
  </Select>
, mountNode);

当组件初始化的时候，显示的是lcuy对应的Lucy(101)；
但当Option是动态变更时， 如

setTimeOut(() => {
  this.setState({
    children: (
        <Option value="lucy">Lucy (101)</Option>
    )
  })
}, 100)

// ....

ReactDOM.render(
  <Select labelInValue defaultValue={{ key: 'lucy' }} style={{ width: 120 }}>
    {children}
  </Select>
, mountNode);

key显示的lucy；（我的期望是：Lucy(101)）

我要怎样才能做，才能在Option变更时，仍然显示的是Lucy（101）而不是lucy呢；

我搜索到一个接近的问题，但我的问题的关键点不是defaultValue，而是我需要在Option数据变更后，能够实现OptionChange这样的事件，使得能触发选中key为lucy的<Option>（并且显示的值是Lucy(101)）；假如没有该值，则显示空白；

谢谢:-D

Answer 1

当年问的一个傻问题，其根本原因就是一般antd组件采用defaultValue时，只保证影响初始化时的默认值，不参与后续的状态变量同步。