Shadcn RadioGroup相邻题目相同选项选中状态异常问题排查

• React DOM复用导致状态残留：RadioGroupItem的key使用了answerText，当不同题目存在相同文本的选项时，React会判定这是同一DOM元素并复用，之前题目的选中状态会被带到新题目上。
• HTML id重复违反规范：RadioGroupItem的id同样使用answerText，不同题目相同文本的选项会出现重复id，导致<label>与单选框的关联混乱，干扰浏览器对选中状态的管理。
• RadioGroup状态未强制重置：切换题目时，若新题目无已保存答案，RadioGroup的value会变为undefined，此时浏览器可能复用之前DOM的选中状态，而非重置为未选中。

1. 确保选项的key和id全局唯一 #

修改RadioGroupItem的渲染代码，将key和id结合当前题目索引（或题目唯一标识），彻底避免重复：

<div key={`${questionIndex}-${answerText}`}>
  <RadioGroupItem
    value={answerText}
    disabled={props.savedAnswers[questionIndex]?.checked}
    id={`${questionIndex}-${answerText}`}
  />
  <Label htmlFor={`${questionIndex}-${answerText}`}>{answerText}</Label>
</div>

2. 强制RadioGroup随题目切换重新渲染 #

给RadioGroup添加key={questionIndex}，确保切换题目时组件完全重新渲染，彻底重置状态：

<RadioGroup
  key={questionIndex}
  value={props.savedAnswers[questionIndex]?.answer}
  onValueChange={(chosenAnswer) => {
    props.saveAnswer(chosenAnswer)
  }}
>
  {choiceElements}
</RadioGroup>

3. 兜底处理未保存答案的情况 #

在RadioGroup的value属性中，当无已保存答案时明确设置为undefined，避免状态歧义：

value={props.savedAnswers[questionIndex]?.answer ?? undefined}

• 若题目有唯一ID，可给SavedAnswers的每个题目答案增加questionId字段，替代仅依赖索引的存储方式，避免题目顺序调整导致的答案错位。
• 切换题目时，可在setQuestionIndex的回调中清空临时状态（如果存在），进一步避免状态残留。

内容的提问来源于stack exchange，提问作者semi_92