React中单选框切换性别状态失效，寻求解决方案

前端代码优化 #

单选按钮的正确用法需要绑定checked属性与状态值，同时使用onChange事件更新状态，仅依赖onClick可能导致状态与按钮选中状态不同步。

修改后的前端代码：

<input 
  type="radio" 
  name="gender" 
  value="masculino" 
  checked={gender === "masculino"}
  onChange={() => setGender("masculino")} 
/>
Masculino
<input 
  type="radio" 
  name="gender" 
  value="femenino" 
  checked={gender === "femenino"}
  onChange={() => setGender("femenino")} 
/>
Femenino

核心调整说明： #

• checked={gender === "masculino"}：将按钮选中状态与组件gender状态绑定，确保状态变化时按钮选中状态同步更新。
• 用onChange替代onClick：这是表单元素的标准交互事件，能更可靠地触发状态更新，贴合单选按钮的原生逻辑。

后端逻辑修正 #

你当前的后端代码patient.gender = gender || patient.gender;存在逻辑漏洞：若前端传递的gender为空字符串（极端场景下可能发生），会直接保留原有值，导致无法更新。建议改为明确判断有效值的逻辑：

const { gender } = req.body;
// 仅当gender存在且不为undefined时更新
patient.gender = gender ?? patient.gender;

逻辑优化说明： #

• 使用??空值合并运算符：只有当gender为null或undefined时，才保留原有patient.gender值，避免空字符串等有效值被忽略。
• 明确的更新规则：确保用户选择新性别时强制更新，未传递有效值时保留原数据，完全匹配编辑场景需求。

额外验证步骤 #

1. 前端提交表单前，打印gender状态值，确认其与当前选中的单选按钮值一致。
2. 编辑场景下，确保组件gender初始值是从后端获取的患者原有性别数据，而非默认空值。

内容的提问来源于stack exchange，提问作者Diego Beristain de la Mora