使用useActionState时select标签无法保留默认值的问题排查

问题原因 #

• 类型不匹配：HTML 的 <select> 和 <option> 的 value 本质都是字符串类型，但你的 state.fieldsData.schoolId 是数字类型。当 defaultValue 传入数字时，和选项的字符串值无法匹配，<select> 找不到对应选项就会默认选中第一个。
• defaultValue 的生效机制：非受控组件的 defaultValue 仅在组件首次挂载时生效。当 useActionState 更新 state 后，组件重新渲染，但 defaultValue 不会触发 <select> 重新选中，因为它只是初始值，后续变更不会被识别。

解决思路 #

方案1：统一类型（最优先） #

把 defaultValue 的数字转成字符串，和 <option> 的 value 类型保持一致：

<select 
  id="schoolId"
  name="schoolId"
  defaultValue={state.fieldsData.schoolId.toString()}
>
  {schools.map((school) => (
       <option key={school.id} value={school.id}>
           {school.name}
       </option>
   ))}
</select>

方案2：强制组件重新初始化 #

如果类型统一后仍有问题，通过修改 key 让 <select> 在 schoolId 变化时重新挂载，这样 defaultValue 会重新生效：

<select 
  id="schoolId"
  name="schoolId"
  defaultValue={state.fieldsData.schoolId.toString()}
  key={`school-select-${state.fieldsData.schoolId}`}
>
  {schools.map((school) => (
       <option key={school.id} value={school.id}>
           {school.name}
       </option>
   ))}
</select>

额外验证点 #

确认返回的 state.fieldsData.schoolId 在 schools 数组中存在对应的选项，如果 id 不存在，<select> 还是会默认选中第一个选项。

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