本文详解如何在 react 问卷应用中正确实现「单题多次选择」场景下的得分逻辑：仅对用户最终选定的答案计分，且支持从正确答案切换至错误答案时扣分、反之则加分，避免重复累加或误减导致的分数失真。
本文详解如何在 react 问卷应用中正确实现「单题多次选择」场景下的得分逻辑：仅对用户最终选定的答案计分，且支持从正确答案切换至错误答案时扣分、反之则加分，避免重复累加或误减导致的分数失真。
在构建交互式测验（Quiz）应用时，一个常见但易被忽视的关键需求是：同一道题下，用户可能反复修改答案，而得分应只反映其最终选择，且需支持“改对加分、改错扣分”的语义。原始代码中 checkEachAnswer 的简单条件判断（if (option === correct) score+1; else score-1）存在根本性缺陷——它未区分“首次选择”与“二次修改”，导致每次点击都无差别触发增减，造成分数严重漂移（例如：先选对 +1 → 再选错 -1 → 又选对 +1 → 最终得分为 1，但实际仅应计最后一次有效选择）。
✅ 正确解法：引入「每题点击次数」与「状态快照」机制
核心思路是为每个题目维护独立的选择历史状态，而非全局 score 的被动叠加。推荐采用以下两层设计：
- 每题独立追踪：为每个题目添加 clicks: number 和 selectedAnswer: string | null 字段；
- 提交时统一计算：在点击“检查答案”时，遍历所有题目，仅依据其 selectedAnswer 与 correctAnswer 的比对结果更新总分。
下面是一个精简、可直接落地的实现方案（基于函数组件 + useState + useCallback）：
// 每道题的数据结构（建议用 TypeScript 定义接口）
const processQuestion = ({ correct_answer, incorrect_answers, question }) => ({
id: self.crypto.randomUUID(), // 唯一标识
prompt: question,
correctAnswer: correct_answer,
options: [...incorrect_answers, correct_answer].sort(() => Math.random() - 0.5),
selectedAnswer: null, // 初始未选
clicks: 0, // 点击次数（用于调试/防刷，非计分必需）
});
// 在 Quiz 组件内管理题目状态
const [questions, setQuestions] = useState([]);
// 处理单个选项点击（关键！只更新该题状态，不立即改分）
const handleOptionSelect = useCallback((questionId, optionValue) => {
setQuestions(prev => prev.map(q =>
q.id === questionId
? {
...q,
selectedAnswer: optionValue,
clicks: q.clicks + 1
}
: q
));
}, []);
// 计算最终得分（调用时机：点击“Check Answer”时）
const calculateScore = useCallback(() => {
return questions.reduce((sum, q) => {
if (q.selectedAnswer === null) return sum; // 未作答不计分
return q.selectedAnswer === q.correctAnswer ? sum + 1 : sum - 1;
}, 0);
}, [questions]);? 渲染题目的正确方式（使用 radio group 保证单选语义）
{questions.map((q) => (
<div key={q.id} className="question-card">
<h3>{decodeHtml(q.prompt)}</h3>
<ul>
{q.options.map((opt) => (
<li key={opt}>
<label>
<input
type="radio"
name={`question-${q.id}`} // 同一组题共享 name 实现互斥
checked={q.selectedAnswer === opt}
onChange={() => handleOptionSelect(q.id, opt)}
/>
{decodeHtml(opt)}
</label>
</li>
))}
</ul>
</div>
))}? 提示：使用 <input type="radio"> 而非 <button> 可天然保障单题单选，避免手动管理 active 类和 clickedOptionIndex 的复杂逻辑，大幅提升可维护性。
⚠️ 关键注意事项
- 不要在 onClick 中直接 setScore(score + 1)：React 状态更新是异步的，连续点击会导致 score 读取陈旧值，引发竞态（race condition）。务必改用 useCallback + reduce 在确定时机批量计算。
- 避免副作用嵌套：原始代码中 handleClick 同时更新 quiz 数组和 score，违反单一职责原则。应拆分为「状态更新」与「分数计算」两个明确阶段。
- HTML 实体解码不可省略：API 返回的题目/选项含 "、' 等，需用 DOMParser 或正则安全解码（示例中 decodeHtml 函数即为此目的）。
- 重置逻辑要完整：“Play Again” 必须重置每道题的 selectedAnswer 和 clicks，而不仅是 score=0。
✅ 总结：可靠计分的三大原则
| 原则 | 说明 | 错误示范 | 正确做法 |
|---|---|---|---|
| 状态隔离 | 每题独立记录选择，不依赖全局临时变量 | 全局 userAnswer[] 数组 | 题目对象内嵌 selectedAnswer |
| 延迟计算 | 分数不在点击时实时更新，而在提交时按终态计算 | setScore(score + 1) 在 click 中 | calculateScore() 在 Check Answer 时调用 |
| 幂等操作 | 同一选项重复点击不应改变状态 | 多次点同一答案反复增减分 | checked={q.selectedAnswer === opt} 保证 UI 与数据严格同步 |
遵循以上模式，即可彻底解决“来回切换答案导致分数归零”的问题，让测验逻辑既符合教育评估常识，又具备工程健壮性。
