React中如何获取office-ui-fabric Dropdown指定key对应的选项文本值

fundsTypes["PersonalCheque"]取值不生效的原因很简单：fundsTypes是IDropdownOption类型的数组，仅支持数字下标访问，不能直接把选项的自定义key当索引取值。

可直接复用的实现方式 #

1. 临时查找（适合低频调用场景） #

用数组原生find方法匹配目标key对应的选项即可，写法轻量，适合选项数量少、转换频次低的场景：

// 封装通用转换方法，所有Dropdown选项都能复用
const getDropdownTextByKey = (
  optionList: IDropdownOption[],
  targetKey: string | number
): string => {
  const matchedOption = optionList.find(option => option.key === targetKey);
  return matchedOption?.text ?? ''; // 无匹配项时默认返回空串，可按需调整默认值
}

// 调用示例
const displayText = getDropdownTextByKey(fundsTypes, "PersonalCheque");
// 返回结果："Personal Cheque"

2. 预生成映射表（适合高频调用场景） #

如果页面中多处需要做key到显示文本的转换，建议提前将选项数组转换为键值对映射表，一次转换后直接按键取值，不需要每次遍历数组：

// 和fundsTypes定义在同一作用域，初始化时一次生成即可
const fundTypeTextMap = fundsTypes.reduce((result, option) => {
  result[option.key] = option.text;
  return result;
}, {} as Record<string | number, string>);

// 直接取值，无需遍历
const displayText = fundTypeTextMap["PersonalCheque"];
// 返回结果："Personal Cheque"

补充说明：如果下拉选项是接口返回的动态数据，需要等选项数据加载完成后，再执行查找或生成映射表的逻辑，否则会出现匹配不到值的问题。

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