React.js中如何将select动态选项值存入state状态变量

你的代码拿不到选中值的核心问题是把onChange事件绑错了位置：下拉选择的change事件只会触发在<select>元素上，绑在内部<option>标签上的事件不会响应选择操作，自然没法把值更新到state里。

1. 先在组件内声明存储选中值的state，初始值和占位选项的value保持一致即可：

   import { useState } from 'react';
   
   // 组件内部声明
   const [doctor, setDoctor] = useState("0");
   

2. 把onChange事件移到外层<select>标签上，同时给select加value属性绑定state，做成受控组件，保证选中状态和视图实时同步。
3. 无数据时显示的"No Doctor Available"选项建议加disabled属性，避免用户误选这个提示项。

<select 
  className='form-control m-2'
  value={doctor}
  onChange={(e) => setDoctor(e.target.value)}
>
  <option value="0">select a doctor</option>
  {drData.length === 0 ? (
    <option disabled>No Doctor Available</option>
  ) : (
    drData.map((option) => (
      <option 
        value={option.data.uid} 
        key={option.data.uid}
      >
        {option.data.name}
      </option>
    ))
  )}
</select>

• 选择完成后，doctor状态里存的就是选中医生的uid，如果需要拿对应医生的完整信息，直接从已经拉取的drData里匹配就行：const selectedDoctor = drData.find(item => item.data.uid === doctor)
• 所有下拉选择的交互逻辑都要绑在select标签上，不要给单个option绑change事件，这是React表单处理的基础规范。

内容的提问来源于stack exchange，提问作者Kamran Ahmed Siddiqui