React中map遍历未知键名对象时如何获取对应键与值

你原有代码里的option.key、option.value写法是在主动查找对象下名为key、value的固定属性，不符合你「不知道具体键名」的场景，直接用JS原生的Object.entries方法动态取键值对即可。

你的ISelectOption索引签名定义本身可用，结合下拉选项单键值对对应一个选项的逻辑（一个选项对象只存一组「提交值-显示文本」映射），修正后的渲染代码如下：

<select {...rest}>
    {options.map((option, i) => {
       // 取出当前选项对象的第一组键值对：[0]是键（对应option的value属性），[1]是值（对应显示文本）
       const [optionValue, optionLabel] = Object.entries(option)[0];
       return (
           <option key={i} value={optionValue}>
               {optionLabel}
           </option>
       );
   })}
</select>

原理说明 #

• Object.entries(obj)会返回对象所有可枚举属性的[键名, 键值]二维数组，不需要提前预知键名就能拿到所有键值映射
• 因为下拉选项的业务逻辑约定每个ISelectOption对象只存一组键值，所以直接取返回数组的第0项就能拿到需要的提交值和显示文本

边界兜底（可选） #

如果存在传入空对象、一个选项对象传了多组键值对的异常场景，可以加一层判断避免报错：

<select {...rest}>
    {options.map((option, i) => {
       const entryList = Object.entries(option);
       // 空对象直接不渲染，多键值对默认取第一组
       if (!entryList.length) return null;
       const [optionValue, optionLabel] = entryList[0];
       return (
           <option key={i} value={optionValue}>
               {optionLabel}
           </option>
       );
   })}
</select>

优化建议 #

如果后续可以调整组件入参约定，更推荐把接口改成固定字段的结构，不需要动态取键，类型校验更严谨，也能避免多键、空对象的异常问题：

export interface ISelectOption {
    value: string;
    label: string;
}

用这个接口的话，你最开始写的option.value、option.label逻辑就能直接正常运行，不需要额外做键值提取。

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