本文详解如何在 react 问答组件中为每道题独立维护用户点击选项的高亮状态，避免跨题干扰与渲染错乱，通过唯一索引+局部状态+语义化 class 控制样式。
本文详解如何在 react 问答组件中为每道题独立维护用户点击选项的高亮状态，避免跨题干扰与渲染错乱，通过唯一索引+局部状态+语义化 class 控制样式。
在构建多题型 Quiz 应用时，一个常见却易被忽视的问题是：所有题目共享同一套点击状态（如 isClickedIndex），导致点击第 1 题的选项后，第 3 题的同位置选项也被意外高亮——这并非 CSS 失效，而是状态设计违背了“每道题独立响应”的交互原则。
根本原因在于原代码中使用了全局单一状态 isClickedIndex（类型为 number），它无法区分「当前正在操作的是哪一道题」。当 quiz.map() 渲染多道题时，所有 <li> 元素都依赖同一个 isClickedIndex 值判断是否添加 "active" class，自然造成状态污染。更严重的是，每次调用 createRandomOptions() 都会生成新数组并重排选项顺序，而 key={index} 又基于动态数组索引，导致 React Diff 算法误判元素身份，引发 UI 错位与状态漂移。
✅ 正确解法：为每道题维护独立的选中索引状态。我们不再使用全局 isClickedIndex，而是在 map 内部为每道题创建局部状态，或通过结构化状态（如对象映射）按题号追踪选择。
以下是优化后的核心逻辑（精简关键部分）：
const quizElements = quiz?.map((eachQuiz, questionIndex) => {
const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1); // ✅ 每题独立状态
const incorrectOptions = eachQuiz.incorrect_answers;
const correctOption = eachQuiz.correct_answer;
const options = [...incorrectOptions, correctOption];
const randomOptions = createRandomOptions(options);
const handleOptionClick = (option, index) => {
setSelectedOptionIndex(index); // 仅更新本题状态
checkEachAnswer(option, correctOption);
};
return (
<div className="quiz-wrapper" key={questionIndex}>
<p className="question">{eachQuiz.question}</p>
<ul>
{randomOptions.map((option, index) => (
<li
key={`${questionIndex}-${index}`} // ✅ 使用复合 key，确保稳定性
className={`option ${selectedOptionIndex === index ? 'active' : ''}`}
onClick={() => handleOptionClick(option, index)}
>
{option}
</li>
))}
</ul>
</div>
);
});? 关键改进点说明：
- 状态粒度精准化：useState(-1) 在 map 每次迭代中创建，使每道题拥有隔离的状态空间；
- Key 唯一且稳定：key={${questionIndex}-${index}} 避免因 randomOptions 重排导致的 DOM 复用错误；
-
CSS 类名语义清晰：.option.active 可通过 CSS 精准控制背景色，例如：
.option { padding: 12px 16px; margin: 4px 0; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; } .option.active { background-color: #4f46e5; /* Indigo-700 */ color: white; } - 无需 :checked 伪类：原答案建议的 option:checked 仅适用于 <input type="radio"> 等表单控件，而本例中 <li> 是自定义交互元素，必须依赖 React 状态驱动 class 切换。
⚠️ 注意事项：
- 切勿在 map 外层定义 useState 并试图“复用”给所有题目；
- 避免将 index 作为 key 用于动态排序列表（如 randomOptions），务必构造稳定唯一 key；
- 若需支持“取消选择”，可将 setSelectedOptionIndex 改为 prev => prev === index ? -1 : index；
- 后续扩展（如显示正确答案、禁用已答题目）也应基于 questionIndex 进行状态分片管理。
总结：React 中的交互状态必须与 UI 结构的嵌套层级对齐。一道题 = 一个状态域；一个选项 = 一个可响应单元。只有让状态“沉下去”，才能让交互“稳下来”。
