React报Too many re-renders错误：map循环内调用setState引发无限重渲染

报错根因 #

你在QuestionData数组的map遍历逻辑中直接调用了状态更新函数setAnswer(answer)，React的状态更新会触发组件重新渲染，而重新渲染时会再次执行map遍历、再次调用setAnswer，形成无限渲染循环，最终触发了React的渲染次数限制报错。

解决方案 #

你需要先调整存储答案的状态结构，再移除渲染逻辑中的直接状态更新操作，具体步骤如下：

1. 调整答案状态结构 #

你要存储多道题的答案，不能用单个值的状态，修改为对象结构存储所有题的答案，键对应题目索引/ID，值对应该题选中的答案：

// 替换原有的单值answer状态
const [answerMap, setAnswerMap] = useState({});

2. 删除map循环中的状态更新语句 #

直接删掉map遍历里的setAnswer(answer);这行代码，不要在组件的渲染流程中同步调用状态更新方法。

3. 改造单选框选择逻辑，单题更新答案 #

首先修改map遍历中单选框的name属性（避免所有题的单选互斥），同时给onChange回调传入当前题的索引：

<input
  id={optiontext}
  name={`options_${index}`} // 每道题单独的name属性
  type="radio"
  value={id}
  onChange={(e) => changeHandler(e, index)} // 传入当前题的索引
  className="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-800"
/>

然后实现changeHandler方法，只更新当前题的答案：

const changeHandler = (e, questionIndex) => {
  const selectedOptionId = e.target.value;
  setAnswerMap(prev => ({
    ...prev,
    [questionIndex]: selectedOptionId
  }))
}

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