切换至下一题时Radio Button已默认选中的问题求助

核心问题原因 #

1. key值使用index导致组件复用
   React依赖key判断组件是否需要重新渲染。如果用数组index作为key，切换题目后新的选项数组index还是0、1、2...，React会复用之前的单选框组件，残留上一题的选中状态，导致自动选中。

2. 未正确绑定当前题目的选中状态
   原代码里单选框没有绑定动态的checked属性，用defaultChecked只是初始化一次，不会随题目切换更新状态，必须用受控组件方式，根据当前题目的已选答案实时更新checked值。

修改方案 #

1. 替换key为唯一标识

把AnswerOptionList中循环的key从index换成answerOption.id，确保每个选项组件有唯一标识，避免复用：

const AnswerOptionList = (props) => {
  return props.answerOptions.map((answerOption) => (
    <Answer
      key={answerOption.id}
      answerContent={answerOption.content}
      answerId={answerOption.id}
      questionId={props.questionId}
      selectedAnswerId={props.selectedAnswerId}
      onAnswerSelected={props.onAnswerSelected}
    />
  ));
};

2. 动态绑定checked属性

在Answer组件中，接收当前题目的选中答案ID，动态设置单选框的checked状态：

const Answer = (props) => {
  const handleSelect = () => {
    props.onAnswerSelected(props.answerId, props.questionId);
  };
  return (
    <div className="radio-group">
      <input
        type="radio"
        id={props.answerId}
        name={props.questionId}
        value={props.answerId}
        onChange={handleSelect}
        checked={props.selectedAnswerId === props.answerId}
      />
      <div className="button">
        <label htmlFor={props.answerId}>{props.answerContent}</label>
      </div>
    </div>
  );
};

补充说明 #

父组件需要维护一个全局的答题状态（比如const [answers, setAnswers] = useState({})），切换题目时，把当前题目的选中答案answers[props.questionId]作为selectedAnswerId传给AnswerOptionList。这样每次切换题目，单选框会根据当前题目的选中状态正确渲染，同时因为key唯一，不会复用之前的组件状态。

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