<Select
placeholder="请选择开单科室"
allowClear={false}
onChange={this.changeOrderedDept}
dropdownStyle={{width:180}}
dropdownMatchSelectWidth={false}
defaultValue={orderedDeptList[0]?.deptCode}
key={orderedDeptList[0]?.deptCode} //避免异步加载数据无法设置默认值
>
{
orderedDeptList.map((item, i) => {
return <Select.Option
key={i}
label={item.deptName}
title={item.deptName}
value={item.deptCode}
>
{item.deptName}
</Select.Option>
})
}
</Select>
描述
orderedDeptList是后端返回的，目标是设置第一个Option为默认值
分析
因为defaultValue只设置了一次，所以即使想用一个存在state中的状态来实现defaultValue的动态绑定也是不行的，思路就是利用diff算法的原理，给Select选择器动态绑定key值，从而实现重新生成一个新的Select选择器挂载到DOM树上，实现defaultValue的动态绑定。
