React提交表单时单选按钮（Radio button）取值为空如何解决？

错误原因与修复方案 #

1. 单选状态更新逻辑错误 #

你在handleGenderChange中虽然复制了新的radio数组newRadio，但实际遍历修改的是原state中的radio数组，虽然数组对象是引用类型修改会生效，但写法不规范，也可能引发不可预期的状态问题。
修复后的代码：

const handleGenderChange =(e) =>{
    // 直接用map生成新数组，修改对应项的选中状态
    const newRadio = radio.map(rf => ({
        ...rf,
        isChecked: rf.name === e.target.value
    }))
    setradio(newRadio);
}

2. UI未绑定checked属性+标签关联错误 #

你的单选框input没有和state中的isChecked绑定，导致选择操作无法和state同步，同时所有单选框的id是固定值、label的htmlFor也是固定值，点击label无法正确对应到对应单选框。
修复后的UI代码：

<label className="mb-2 fw-bold">Gender</label>
{
    radio.map((rd)=>(
        <div className="form-check" key={rd.name}>
            <input 
                className="form-check-input" 
                type="radio" 
                name="gender" 
                id={`gender-${rd.name}`} 
                value={rd.name} 
                checked={rd.isChecked}
                onChange={handleGenderChange} 
            />
            <label className="form-check-label" htmlFor={`gender-${rd.name}`} >{rd.name}</label>
        </div>
    ))
}

3. 提交函数误用异步更新的state #

React的setdata是异步更新方法，调用后不会立刻修改当前作用域下的data变量，你直接用旧的data打印、提交接口，自然拿不到最新的性别值。
修复后的提交函数：

const handleSubmit = (e) => {
    e.preventDefault();
    let newData = {...data};
    radio.forEach((rs)=>{
        if(rs.isChecked){
            newData.gender = rs.name;
        }
    })
    setdata(newData);
    // 用刚组装好的newData打印、提交，不要用旧的data
    console.log(newData);  
    dispatch(allActions.createData(newData));
}

优化建议（可选） #

其实单选框不需要单独维护一个radio数组state，直接把选中值存在data.gender里即可，代码会更简洁：

// 删掉单独的radio state
const handleGenderChange =(e) =>{
    setdata(prev => ({...prev, gender: e.target.value}))
}
// UI里的checked直接绑定：checked={data.gender === rd.name}

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