React表单中单选按钮checked/defaultChecked失效问题求助

问题根源 #

你当前的代码存在两个核心问题：

• 用userItem.gender直接绑定checked属性：userItem是外部传入的初始数据，不会随着组件内部状态更新而变化。点击单选按钮时，虽然调用setGender更新了gender状态，但checked判断依然依赖静态的userItem，导致按钮无法切换。
• 使用defaultChecked无效：defaultChecked仅在组件初始渲染时生效，如果初始化时userItem还未加载完成，或者初始渲染时userItem.gender的判断条件不满足，就不会有按钮被选中；且它属于非受控组件属性，无法响应后续状态变化。

解决方案 #

将单选按钮改成受控组件，用组件内部的gender状态同时控制初始选中和切换逻辑：

修改后的代码 #

// 初始化state时直接使用userItem的gender值，处理可能的未定义情况
const [gender, setGender] = useState(userItem?.gender || 0);

<div className="radio-buttons">
    <input
        type="radio"
        id="women"
        value={2}
        name="gender"
        // 绑定到组件内部的gender状态
        checked={gender === 2}
        onChange={() => setGender(2)}
    />
    <label htmlFor="women">Women</label>

    <input
        type="radio"
        id="man"
        value={1}
        name="gender"
        checked={gender === 1}
        onChange={() => setGender(1)}
    />
    <label htmlFor="man">Man</label>
</div>

关键调整说明 #

1. 初始化state：把userItem.gender作为useState的初始值，确保组件渲染时就能根据已有数据选中对应按钮。加上?.和|| 0是为了避免userItem未加载时出现报错。
2. 绑定checked到内部状态：将checked的判断条件从userItem.gender === x改成gender === x，这样当点击单选按钮触发setGender时，状态更新会同步反映到checked属性，实现按钮切换。

这样修改后，既能正确显示初始的性别数据，又能正常切换单选按钮。

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