React JSX中无法读取select标签选中值该如何解决

• 初始state中gender字段的默认值为空字符串''，但现有<option>的value取值为select、Male、Female，没有与空字符串匹配的选项，React会将该select识别为非受控组件，导致状态同步失效，无法正确读取选中值。
• 若存在多个连续修改addEmpData的操作，当前直接使用...addEmpData的更新方式可能存在闭包陷阱，获取的不是最新的state值，导致更新丢失。

可按照以下步骤修复：

1. 对齐初始值与默认选项的value，两种方案二选一：
   • 方案A：修改state初始值，将gender默认值改为和现有默认选项匹配的select

   const [addEmpData, setAddEmpData] = useState({
     user_id:'',
     employee_id:'',
     name:'',
     date_of_join:'',
     gender:'select', // 调整默认值和option取值对齐
     designation:'',
     user_role:''
   })
   

   • 方案B：调整默认选项的value，匹配初始空字符串

   <select value={addEmpData.gender} onChange={(e)=>setAddEmpData(prev => ({...prev, gender:e.target.value}))} className="select">
     <option value=''>Select</option> {/* 调整默认选项value为空，匹配初始state */}
     <option value="Male">Male</option>
     <option value='Female'>Female</option>
   </select>
   

2. 将state更新改为函数式写法，如上述代码中onChange的写法，通过prev =>的形式获取最新的前序状态再做修改，避免闭包导致的状态更新错误。

内容的提问来源于stack exchange，提问作者Ghanasyam N S