ReactJS切换题目时radio单选按钮选中状态错误如何解决？

根因分析 #

• 你当前使用的单选框为非受控组件，未显式绑定checked属性和当前题目的答案状态，浏览器会自动保留同value单选框的选中状态
• 切换题目时未重置对应选中状态缓存，渲染下一题时复用了上一题同value选项的选中状态
• 若不同题目下的单选框name属性值相同，也会导致不同题目的单选被识别为同一组，出现选中状态联动

修复步骤 #

1. 将单选框改为受控组件，显式绑定选中状态
   新增状态存储当前题目的选中值，绑定到单选框的checked属性，同时确保同题的单选name一致、不同题name唯一：

// 新增当前题选中状态
const [currentSelected, setCurrentSelected] = useState(null)

// 修改单选框代码
<input
   type="radio"
   id={`optionOne${number}`}
   // 绑定当前题目索引作为name前缀，保证不同题的单选属于不同组
   name={`question${currentIndex}`}
   value={'1'}
   checked={currentSelected === '1'}
   onChange={e => {
     setCurrentSelected(e.target.value)
     setOneAnswer(e)
   }}
/>

2. 切换题目时重置选中状态
   点击下一题提交答案后，先清空当前选中状态再切换题目索引：

const handleNext = async () => {
  // 提交当前题答案到服务器的逻辑
  await submitAnswer(currentSelected)
  // 重置当前题选中状态
  setCurrentSelected(null)
  // 切换到下一题
  setIndex(prev => prev + 1)
}

3. 兜底兼容（可选）
   如果存在框架DOM复用导致的状态残留，可以给题目渲染容器绑定唯一key，强制切换题目时销毁旧DOM，避免状态复用：

<QuestionItem 
  key={currentIndex}
  data={questionList[currentIndex]}
/>

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