Antd Radio单选框循环渲染时修改单题所有答案同步变动如何解决

问题原因 #

所有题目共用了同一个value状态变量，任意题目触发修改都会更新这个全局状态，导致所有Radio.Group同步取值。

解决方案 #

将单值状态修改为映射结构，独立存储每道题的选中值，通过题目唯一标识定位修改对应题目的答案，具体实现代码如下：

import { Radio } from "antd";
const { questions} = props;
// 状态存储结构为 { [题目唯一标识]: 选中值 }
const [answerMap, setAnswerMap] = useState({});

const onChange = (questionKey, e) => {
  setAnswerMap(prev => ({
    ...prev,
    [questionKey]: e.target.value
  }));
};

{questions.map((question, index) => {
  // 优先取题目自身的唯一id，无id时用遍历索引替代
  const questionKey = question.id ?? index;                    
  return (
    <div key={questionKey}>
      <div>{question.Description}</div>
      <Radio.Group 
        value={answerMap[questionKey] ?? 1} // 未作答时的默认值可自行调整
        onChange={(e) => onChange(questionKey, e)} 
      >
        <Radio value={1}>A</Radio>
        <Radio value={2}>B</Radio>
        <Radio value={3}>C</Radio>
      </Radio.Group>
    </div>
  ) 
})}

补充说明 #

• 无需给单个Radio组件添加额外id/key，只要保证每个Radio.Group绑定独立的状态值即可
• 遍历渲染的外层容器必须加唯一key属性，避免React出现渲染异常

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