React中如何将对象渲染到Select并获取选中项的键值对

问题描述 #

有如下银行数据对象：

const data = {
  "070010": "ABBEY MORTGAGE BANK-070010",
  "044": "ACCESS BANK PLC-044",
  "323": "AccessMobile-100013",
}

需要在React的<select>标签中渲染对象的value作为选项文本，并且在选项变更时获取对应的key和value。之前尝试的代码无法正常运行：

const [acctname,setAcctname]=useState("")
for (const key in data) {
  if (Object.hasOwnProperty.call(data, key)) {
    const element = data[key];
    setAcctName(Object.values(data))
    
  }
}

return (
<select>
   <option >{acctName}</option>
</select>
)

问题分析 #

1. 在组件渲染逻辑里直接用for循环调用setState是错误的，会触发多次不必要重渲染，且Object.values(data)返回数组，直接塞到单个<option>里会导致所有值挤在一起显示。
2. 没有正确遍历对象生成多个<option>标签，也未处理选择变更事件。

正确实现代码 #

import { useState } from 'react';

const BankSelect = () => {
  const data = {
    "070010": "ABBEY MORTGAGE BANK-070010",
    "044": "ACCESS BANK PLC-044",
    "323": "AccessMobile-100013",
  };
  // 存储选中的key和value，初始可设为空或默认值
  const [selectedBank, setSelectedBank] = useState({ key: '', value: '' });

  // 处理选择变更事件
  const handleSelectChange = (e) => {
    const selectedKey = e.target.value;
    const selectedValue = data[selectedKey];
    setSelectedBank({ key: selectedKey, value: selectedValue });
    // 可直接使用选中的key和value做后续操作
    console.log('选中的key:', selectedKey);
    console.log('选中的value:', selectedValue);
  };

  return (
    <select 
      value={selectedBank.key} 
      onChange={handleSelectChange}
    >
      {/* 空选项提示 */}
      <option value="">请选择银行</option>
      {/* 遍历对象生成选项，key设为对象的key保证唯一性，value存key方便后续获取 */}
      {Object.entries(data).map(([key, value]) => (
        <option key={key} value={key}>
          {value}
        </option>
      ))}
    </select>
  );
};

export default BankSelect;

代码说明 #

• 用Object.entries(data)将对象转换为键值对数组，遍历生成对应<option>标签，每个选项的key用对象的key保证唯一性，value存储对象的key，便于变更时通过e.target.value拿到key，再从data中获取对应value。
• 用useState存储选中的键值对，方便后续业务使用。
• 绑定onChange事件处理选择变更，在回调中获取选中的key和value并更新状态。

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