React中select下拉框首个选项无法选中 需先选其他选项才生效

• 你使用的是React受控Select组件，要求组件value属性与绑定的React state完全同步。初始时你未给author state设置与首个option的value匹配的初始值，出现了状态不一致的情况：浏览器原生行为会让Select视觉上默认展示首个option的内容，但React内部author state仍为初始值（如undefined、空字符串等），与首个option的value不相等。
• 此时展开下拉框，首个option视觉上已经处于选中状态，点击该选项时浏览器会判定选中值与当前值无变化，不会触发onChange事件，自然不会执行setAuthor更新state。
• 当先选中其他option时，onChange正常触发，state被更新为对应值，此时再选首个option，选中值与当前state值存在差异，就会正常触发更新逻辑。

两种通用修复方案可按需选择：

方案1：给state设置匹配首个option的初始值 #

初始化author state时，直接取authors数组首个元素的name作为默认值，保证初始状态完全同步：

// 原初始写法示例
// const [author, setAuthor] = useState('')
// 修改为
const [author, setAuthor] = useState(authors.length > 0 ? authors[0].name : '')

该方案适合需要默认选中第一个选项的业务场景，从根源避免状态不一致问题。

方案2：新增默认空选项 #

如果不需要默认选中具体作者，可以增加一个value和state初始值匹配的空提示选项：

<select value={author} onChange={({ target }) => setAuthor(target.value)} >
  <option value="">请选择作者</option>
  {authors.map(author => 
    <option key={author.name} value={author.name}>
      {author.name}
    </option>
  )}
</select>

该方案初始会显示提示文本，用户选择任意作者选项都会触发onChange更新state。

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