React中<Option>默认选中值不生效及首选项点击异常问题

问题根源 #

你遇到的异常核心是用数组index作为Option的value，同时选中判断逻辑基于name字段，两者不匹配导致状态混乱：

1. 默认选中场景下，myFruit.name === x.name为true，但Option的value是index，若Select组件绑定的value与Option的value逻辑不统一，会出现视觉选中和实际组件值脱节的情况。
2. 首次点击第一个选项时，由于value是固定的index（比如0），若组件初始状态的value也是0，React会认为状态未发生变化，不会触发更新；点击其他选项后状态改变，再点第一个时，状态从非0值变回0，组件才会识别到变化并响应。

修复方案 #

1. 替换Option的value为唯一业务标识
   把value从index换成x.name（或x.id这类全局唯一值），让选中判断逻辑与value保持一致：

Fruits.map((x) => { 
  return <Option selected={myFruit.name === x.name} value={x.name}>{x.name}</Option>
})

2. 确保Select组件受控状态一致
   如果是受控Select组件，绑定的value要和Option的value类型匹配，同时在onChange时正确更新选中状态：

<Select value={myFruit.name} onChange={(selectedValue) => {
  const targetFruit = Fruits.find(item => item.name === selectedValue);
  setMyFruit(targetFruit);
}}>
  {/* 渲染Option列表 */}
</Select>

额外提示 #

永远避免用数组index作为表单组件的value，尤其是当数组可能发生排序、增删操作时，index会导致组件状态混乱，优先使用业务上的唯一标识（如ID、唯一名称）。

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