React调用API渲染下拉选单无法获取正确选中值，总返回未选最后项

问题根因 #

你的代码存在3处核心错误，共同导致选中值异常：

• selected属性逻辑写反：当前规则是option.value !== userObject?.relationship时标记选中，匹配到对应值反而不会被选中，最终只会选中最后一个符合「不等于」条件的选项
• <option>未设置value属性，表单事件无法读取选中项对应的实际值
• 未遵循React受控组件规范：<select>组件没有绑定统一的value属性，分散给每个option设置selected容易出现状态冲突

修复方案 #

按以下规则修改代码即可：

1. 给<select>标签绑定value属性，直接关联你存储的选中值，不需要给每个option单独设置selected
2. 给每个<option>添加value属性，值为对应option的value字段
3. 确认handleChange事件正确同步选中值到对应状态

修复后代码示例 #

<select 
  className={Styles.formControl} 
  style={{ width: '580px'}} 
  name="relationship"  
  id="relationship" 
  value={userObject?.relationship || ''} 
  onChange={handleChange} 
  onBlur={handleBlur}
>
  {data?.map((option, index) => (
    <option 
      key={`options_key_${index}`}
      value={option.value}
    >
      {option.relationship}
    </option> 
  ))} 
</select>

handleChange参考实现 #

const handleChange = (e) => {
  const selectedValue = e.target.value
  // 同步更新存储选中值的状态即可
  setUserObject(prev => ({...prev, relationship: selectedValue}))
}

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