React中使用map渲染radio单选按钮无法单选该如何解决？

HTML 原生单选框（type="radio"）的互斥选中逻辑依赖同组单选框的name属性值完全一致。你当前代码中每个单选框的name绑定了当前选项的内容answer.answer_option，每个选项的name都不相同，所以不会触发互斥效果，可以同时选中多个。

核心修改是把同一道题的所有单选框name属性设为同一个值，推荐和当前题目ID绑定，避免多题场景下不同题目之间的单选逻辑冲突：

<h3>{data[currentQuestion].question_title}</h3>
{data[currentQuestion].Question_answer.map((answer, key) => (
    <label key={key}>
        <input
            type="radio"
            value={answer.answer_option}
            {/* 同一道题的所有单选框使用统一name */}
            name={`question_${data[currentQuestion].id}`}
            onClick={() => checkAnswer(answer)}
        />
        &nbsp;
        {answer.answer_option}
    </label>
))}

同时删除了原代码中多余的空标签<></>，并给label加上了key属性，避免React的列表渲染警告。

可选优化（受控组件方案） #

如果需要更稳定的选中状态控制，可新增状态存储用户选择的选项，改成受控组件：

1. 新增选中状态：

const [selectedOption, setSelectedOption] = useState(null);

2. 修改checkAnswer逻辑，先更新选中状态再执行原有校验：

const checkAnswer = (answer) => {
  setSelectedOption(answer.answer_option);
  // 原有答案校验逻辑保留
}

3. 给单选框添加checked属性绑定状态：

<input
  type="radio"
  value={answer.answer_option}
  name={`question_${data[currentQuestion].id}`}
  checked={selectedOption === answer.answer_option}
  onClick={() => checkAnswer(answer)}
/>

这个方案可以完全控制单选框的选中状态，避免页面重渲染时选中状态丢失的问题。

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