Ant Design Select绑定onChange后选中项显示value而非label如何解决？

问题根因 #

你绑定onChange后大概率将Select改为了受控使用模式（即给Select组件传入了value属性，值为你在onChange回调中存储的选中项id）。当组件处于受控模式时，会自动从options数组中匹配和传入value相等的项，取对应的label展示；如果匹配不到任何项，就会直接展示value本身。
你注释掉onChange时，组件处于非受控模式，内部自主维护选中状态，不需要依赖外部传入的value做匹配，因此可以正常展示label。

解决方案 #

• 校验你存储并传入Select的value值类型，和options中value的类型是否完全一致：比如options里value为数字类型的id，就不要传入字符串类型的同值id，类型差异会导致匹配失败
• 确保options数组在选中操作完成后没有被修改，导致选中值对应的项被移除，无法匹配
• 若需要自行维护选中项的label，可以开启labelInValue属性，此时onChange回调会直接返回包含value和label的对象，你可以直接存储该结构并传给Select的value属性：

<Select        
  onChange={(obj) => onChangeHandler1(obj.value, obj.label)}
  labelInValue
  value={selectedItem} // 这里传入的selectedItem需要是{value: xxx, label: xxx}格式
  placeholder="Select any one"
  style={{ width: 120 }}
  options={data
    .filter((d) => !d.disabled)
    .map((item) => {
      return {
        label: item.name,
        value: item.id
      };
    })}
  bordered={false}
/>

内容的提问来源于stack exchange，提问作者theinfiltrator