本文详解 Shadcn RadioGroup 在多题分页场景下「前一题答案被错误复用到后一题」的根本原因——未显式控制 RadioGroupItem 的 checked 状态，并提供可立即落地的修复方案与最佳实践。
本文详解 shadcn `radiogroup` 在多题分页场景下「前一题答案被错误复用到后一题」的根本原因——未显式控制 `radiogroupitem` 的 `checked` 状态，并提供可立即落地的修复方案与最佳实践。
在基于 Shadcn UI 构建的交互式测验应用中，常见分页逻辑：每道题渲染一个 RadioGroup，用户选择唯一答案并保存至状态（如 savedAnswers[questionIndex]）。但开发者常遇到一个隐蔽却高频的问题：当相邻题目恰好包含相同选项文本（例如两题均含 "Hippo"），切换题号后该选项自动处于选中态，造成视觉误导与逻辑混乱。
根本原因在于：Shadcn 的 RadioGroupItem 组件本身不依赖 RadioGroup 的 value 做受控渲染，而是通过原生 <input type="radio"> 的 checked 属性控制视觉状态。而当前代码中完全未设置 RadioGroupItem.checked，导致浏览器依据 DOM 复用或历史值“记忆”了上一题的选中行为——尤其在选项值相同时，React 的 reconciliation 机制可能复用已有 input 元素，其 checked 状态未被重置。
✅ 正确解法是：显式为每个 RadioGroupItem 设置 checked 属性，使其严格受当前题目答案控制。 修改 RadioGroupItem 渲染逻辑如下：
{props.questionOptions.map((answerText, i) => (
<div key={answerText} className="flex items-center space-x-2">
<RadioGroupItem
value={answerText}
// ✅ 关键修复：显式声明 checked 状态
checked={props.savedAnswers[questionIndex]?.answer === answerText}
disabled={props.savedAnswers[questionIndex]?.checked}
id={`q${questionIndex}-option-${i}`}
/>
<Label htmlFor={`q${questionIndex}-option-${i}`}>{answerText}</Label>
</div>
))}? 注意事项：
- id 必须保证跨题唯一（推荐加入 questionIndex 或全局唯一标识），避免 label 绑定错乱；
- checked 是布尔值，不可传 undefined 或 null，否则浏览器将按原生规则回退到历史状态；
- RadioGroup 的 value 属性仍需保留（用于 onValueChange 触发），但它仅影响事件回调，不直接控制子项视觉状态；
- 若启用「提交后禁用所有选项」，disabled 逻辑无需改动，但需确保 checked 优先级高于 disabled（Shadcn 已兼容）。
此外，建议在组件顶层添加防御性逻辑，防止 savedAnswers 中缺失当前题索引时产生 undefined 比较：
const currentAnswer = props.savedAnswers[questionIndex]?.answer ?? "";
// ...
checked={currentAnswer === answerText}最终效果：每道题的单选状态完全隔离，选项文本重复不再引发状态污染，用户体验符合直觉，且代码具备明确的受控性与可预测性。此模式同样适用于其他基于原生 radio 的封装组件，核心原则始终是——视觉状态必须由组件自身属性显式驱动，而非依赖父容器或 DOM 历史。
