本文详解如何在 react 问答应用中，为每个题目独立管理选项的点击状态，实现“点击一个选项高亮、再次点击其他选项时自动取消前一个高亮”的交互逻辑，避免跨题干扰与渲染错乱。
本文详解如何在 react 问答应用中，为每个题目独立管理选项的点击状态，实现“点击一个选项高亮、再次点击其他选项时自动取消前一个高亮”的交互逻辑，避免跨题干扰与渲染错乱。
在构建多题型 Quiz 应用时，一个常见但易被忽视的关键问题是：状态管理粒度不足。原代码中使用单一全局状态 isClickedIndex 来记录“被点击的索引”，导致所有题目共用同一索引值——当第 1 题第 2 个选项被点击，isClickedIndex = 1，而第 2 题渲染时也依据该值判断高亮，造成跨题污染；同时，每次调用 createRandomOptions() 重新打乱数组却未稳定 key 或缓存顺序，进一步引发 DOM 错位与状态漂移。
✅ 正确解法是：为每道题维护独立的选中状态，而非全局索引。
✅ 推荐方案：按题号存储选中选项（推荐）
将 isClickedIndex 替换为以题目索引为 key 的对象，例如：
const [selectedOptionIndex, setSelectedOptionIndex] = useState({}); // {0: 2, 1: 0, ...}并在 handleClick 中更新指定题目的选中索引：
const handleClick = (questionIndex, optionIndex) => {
setSelectedOptionIndex(prev => ({
...prev,
[questionIndex]: optionIndex
}));
};渲染时，通过 questionIndex 查找当前题目的高亮状态：
{randomOptions.map((option, index) => (
<li
key={index}
className={`option ${selectedOptionIndex[questionIndex] === index ? "active" : ""}`}
onClick={() => handleClick(questionIndex, index)}
>
{option}
</li>
))}⚠️ 注意：key 必须稳定！不要用 index 作为 key（尤其当选项顺序动态变化时）。推荐改用选项内容哈希或添加唯一 ID 字段（如后端返回 option_id），或至少确保 randomOptions 在组件生命周期内不重复生成（见下方优化建议）。
✅ 避免随机重排导致状态错乱
原 createRandomOptions() 每次渲染都执行，使 map 的 index 不再稳定。应将随机化结果缓存到题目数据中：
// 在 fetch 后预处理：为每道题生成固定随机顺序
const processedQuiz = data.results.map(q => ({
...q,
shuffledOptions: createRandomOptions([
...q.incorrect_answers,
q.correct_answer
])
}));
setQuiz(processedQuiz);随后在 quizElements 中直接使用 eachQuiz.shuffledOptions，不再每次渲染调用 createRandomOptions()。
✅ CSS 样式支持（辅助增强）
配合以下 CSS 可强化视觉反馈（注意：:checked 仅适用于 <input type="radio">，不适用于 <li> —— 原答案中的 option:checked 是错误示例，因 <li> 无 checked 属性）：
.option {
padding: 12px 16px;
margin: 4px 0;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s;
}
.option.active {
background-color: #4f46e5; /* indigo-600 */
color: white;
}✅ 完整关键修改摘要
| 问题点 | 错误做法 | 正确做法 |
|---|---|---|
| 状态共享 | 全局 isClickedIndex | 每题独立 selectedOptionIndex[questionIndex] |
| Key 不稳定 | key={index} + 每次重排 | 预计算 shuffledOptions，或用 key={option + questionIndex} |
| 事件绑定 | onClick={() => checkEachAnswer(...)} 内混杂业务逻辑 | 分离关注点：onClick 仅更新 UI 状态，useEffect 或按钮提交时校验答案 |
? 提示：若需支持“取消选择”（即再次点击已选项则清空），可在 handleClick 中增加判断：if (selectedOptionIndex[questionIndex] === index) { /* 清空 */ } else { /* 设置 */ }
通过以上重构，即可实现每道题互不干扰、点击响应精准、DOM 稳定不跳动的专业级交互体验。
