React Select组件option选项如何同时传递ID与名称两个值

• 原生<option>标签的value属性仅支持传递单个字符串值，现有代码只给value赋值了agent.agentId，change事件触发时自然只能拿到id，无法直接获取对应的agent名称。
• addCapabilities方法中直接使用的agent变量未绑定当前选中项的对应数据，属于作用域内未定义的变量，根本拿不到选中项的名称值。
• 额外问题：渲染option时用数组下标index作为key，当agents数组顺序调整、存在增删操作时，会导致选中状态错位、渲染异常。

优先使用「选中ID反查原数组」的方案，稳定性最高，不存在序列化解析风险：

const handleChangeForm = (e) => {
  const { id, value } = e.target
  setForm({
    ...form,
    [id]: value
  })
}

const addCapabilities = async (tableName, body) => {
  // 从已有的agents数组中匹配id对应的完整agent数据
  const currentAgent = agents.find(item => item.agentId === form.agent)
  const newCapabilities = {
    agentId: currentAgent?.agentId,
    agentName: currentAgent?.agent
  }
  response(newCapabilities)
}

return (
  <form>
    <label>Agent</label>
    <select className='add-cap-select' id='agent' onChange={handleChangeForm}>
      <option value=''>Agent</option>
      {agents.map((agent) => (
        // 替换key为业务唯一标识agentId，避免渲染异常
        <option key={agent.agentId} value={agent.agentId}>
          {agent.agent}
        </option>
      ))}
    </select>
  </form>
)

如果需要在选中时直接拿到全量数据，也可以将option的value序列化为JSON字符串，取值时反序列化即可，但该方案存在特殊字符解析失败的风险，不推荐在生产环境使用：

const handleChangeForm = (e) => {
  const { id, value } = e.target
  setForm({
    ...form,
    [id]: value ? JSON.parse(value) : null
  })
}

// select渲染部分
<select className='add-cap-select' id='agent' onChange={handleChangeForm}>
  <option value=''>Agent</option>
  {agents.map((agent) => (
    <option key={agent.agentId} value={JSON.stringify(agent)}>
      {agent.agent}
    </option>
  ))}
</select>

注意：如果使用受控select组件，第二种方案需要在form值初始化、重置时做好空值兼容，避免JSON解析报错。

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