本文介绍如何利用受控组件原理，通过绑定 checked 属性与状态对象实现单选按钮随问题切换自动重置，无需手动触发重渲染或清空 DOM。
本文介绍如何利用受控组件原理，通过绑定 `checked` 属性与状态对象实现单选按钮随问题切换自动重置，无需手动触发重渲染或清空 dom。
在 React 中，单选按钮（radio input）不应依赖 DOM 操作或强制重渲染来“取消选中”；正确做法是将其转化为受控组件：即每个 <input type="radio"> 的 checked 状态完全由 React state 驱动，而非依赖浏览器默认行为。
核心原理：用 checked + onChange 实现受控
关键在于两点：
- 为每个 radio 设置 checked={answer === option}，其中 answer 是当前题目的已选答案（如 answers[questionText]）；
- 点击时通过 onChange 更新 answers 对象，而非局部变量。
这样，当 count 变化导致题目切换时，新题对应的 answers[questions[count].question] 默认为 undefined，所有 radio 的 checked 自动为 false——自然“重置”。
改造你的代码：关键修改点
你当前的 radio 渲染方式是非受控的（仅监听 onChange，但未设置 checked），且所有 radio 共享同一个 name="answer"，却未隔离每道题的答案状态。需做如下调整：
✅ 步骤 1：重构 answers 状态结构
将 answers 从 { [index]: value } 改为以题目唯一标识（如 question 文本或 ID）为 key 的对象，确保跨题独立：
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
const [answers, setAnswers] = useState<Record<string, string>>({});✅ 步骤 2：为每个 radio 显式绑定 checked
假设每道题有唯一 question 字段（推荐使用 questions[count]._id 更健壮），修改 radio 渲染逻辑：
{questions[count]?.answers?.[0] && (
<ul>
{(['a', 'b', 'c', 'd'] as const).map((key) => {
const optionValue = questions[count].answers[0][key];
const isCurrentAnswer = answers[questions[count].question] === optionValue;
return (
<li key={key} className="pb-3">
<label>
<input
type="radio"
name={`q-${count}`} // 使用唯一 name 避免跨题互斥
value={optionValue}
checked={isCurrentAnswer}
onChange={() =>
setAnswers(prev => ({
...prev,
[questions[count].question]: optionValue
}))
}
/>
{` ${key}) ${optionValue}`}
</label>
</li>
);
})}
</ul>
)}⚠️ 注意：name 属性必须每道题唯一（如 q-0, q-1），否则不同题的 radio 会相互影响。React 中更推荐用 key 和受控逻辑替代 name 互斥机制。
✅ 步骤 3：移除冗余状态与副作用
- 删除 answer 和 convertAnswers 等中间状态，直接使用 answers；
- handleNext 和 handlePrev 只需更新 count，无需手动重置 radio——checked 会随 answers[questions[count].question] 自动同步。
完整优化示例（精简版）
// 替换原 radio 渲染区块
{questions[count] && (
<div>
<h2>{questions[count].question}</h2>
<ul>
{(['a', 'b', 'c', 'd'] as const).map((key) => {
const text = questions[count].answers[0][key];
const isSelected = answers[questions[count].question] === text;
return (
<li key={key} className="pb-3">
<label className="flex items-center">
<input
type="radio"
checked={isSelected}
onChange={() => setAnswers({
...answers,
[questions[count].question]: text
})}
className="mr-2"
/>
<span>{`${key}) ${text}`}</span>
</label>
</li>
);
})}
</ul>
</div>
)}为什么不用 useEffect 重置？
你提到的 useEffect 方案（如监听 count 变化后清空选中）属于反模式：
- 违背受控组件原则，引入不必要的 DOM 干预；
- 增加维护成本，且易因异步时机出错；
- React 的声明式更新天然支持“状态驱动 UI”，checked 绑定即是最简洁解法。
总结
- ✅ 正确姿势：用 checked={answers[question] === option} + onChange 更新 answers 对象；
- ✅ 命名规范：每道题 radio 使用独立 name 或直接依赖受控逻辑，避免全局互斥；
- ❌ 避免操作：不要调用 inputRef.current.checked = false、不依赖 key 强制重渲染、不手动清空 state；
- ? 进阶建议：为题目添加唯一 id 字段（而非依赖 question 文本），提升状态键可靠性。
这样，每次点击「Next」切换题目时，新题的 radio 自动无选中态，旧题答案完整保留——既符合 React 思想，又零耦合、易测试、可扩展。
