React Select选值无效 Axios POST请求API报Guid转换错误

你遇到的branchId赋值失败、Guid转换报错，是4处代码写法问题共同导致的：

• 事件绑定位置错误：把onChange事件绑在了<option>标签上，浏览器不会在option元素上触发change事件，只有外层<select>标签会在选项切换时触发该事件，导致选择分支时setBranchId根本没有执行，提交请求时branchId始终是初始空字符串，后端拿到空字符串无法转换为Guid类型，就会抛出你看到的错误。
• 选项缺少value属性：<option>标签没有显式设置value属性，就算事件绑定位置正确，也无法准确读取到选中的分支ID。
• 提交后数据覆盖：POST请求成功后调用setData(res.data)，会直接把之前接口拉取的分支列表替换成新创建的Leader数据，导致下拉框选项丢失。
• 缺少必填校验：默认提示选项没有做拦截，用户未选择分支直接提交时，空值必然触发后端类型转换错误。

import React, {useState, useEffect} from 'react'
import axios from 'axios'

const LeadersPost = () => {
   const [totem, setTotem] = useState('');
   const [branchId, setBranchId] = useState('')
   // 单独存储分支列表，避免和提交返回数据冲突
   const [branchList, setBranchList] = useState([]);

   useEffect(() => {
    const fetchData = async() => {
        try{
            const {data: response} = await axios.get('https://localhost:7070/api/Branches');
            setBranchList(response);
            } catch (error) {
                console.error(error.message);
            }
    }
    fetchData();
}, []);


   const onSubmit = async (e) => {
       e.preventDefault();
       // 提交前校验分支是否已选择
       if(!branchId) {
           alert('请先选择所属分支');
           return;
       }
       const postData = {
           totem : totem,
           branchId : branchId
       }
       try{
           await axios.post('https://localhost:7070/api/Leaders', postData)
           alert('创建成功');
           setTotem('');
           setBranchId('');
       } catch (error){
           console.error(error.message);
       }
   }

   return(
       <div className='container mt-2'>
           <h2>Leaders Post Request</h2>
           <form onSubmit={onSubmit}>
               <div className='mb-2 mt-3'>
                   <input 
                   type='text'
                   placeholder='Leader Totem'
                   className='form-control'
                   value={totem}
                   onChange={e => setTotem(e.target.value)} />
                    {/* 将change事件绑定到select标签，同时绑定value做成标准受控组件 */}
                    <select 
                        className="form-control" 
                        aria-label="Default select example"
                        value={branchId}
                        onChange={e => setBranchId(e.target.value)}
                    >
                        {/* 默认选项value设为空字符串，和初始state对应 */}
                        <option value="">Choose a branch</option>
                        {
                            branchList.map(branch => 
                            // 每个选项显式设置value为分支id，加key避免React渲染警告
                            <option key={branch.id} value={branch.id}>
                                {branch.id}
                            </option>)
                        }
                    </select>
                <button type='submit' className='btn btn-primary'>Create</button>   
               </div>
           </form>
       </div>
   )
}

export default LeadersPost

• 将onChange事件移到<select>标签上，同时给select绑定value={branchId}，实现受控组件，选项变化时会同步更新branchId状态
• 给所有<option>标签添加value属性，默认提示项value设为空字符串，分支选项value绑定对应分支id
• 拆分分支列表状态和提交返回数据，避免POST成功后覆盖下拉选项
• 增加提交前非空校验，阻止空值提交
• 移除和async/await混用的.then链式调用，保持代码逻辑一致，避免状态更新混乱

补充说明：.NET后端的JSON序列化器支持自动将符合Guid格式的字符串转换为System.Guid类型，只要前端不传空值、null或者非Guid格式的字符串，就不会触发类型转换错误，不需要额外做格式处理。

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