Antd Select选择器解决异步数据设置默认值

<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的动态绑定。