React 报错“Too many re-renders”通常源于事件处理器被立即执行而非延迟调用，导致状态更新触发无限循环渲染。本文以答题组件为例，详解错误根源、正确写法及最佳实践。
react 报错“too many re-renders”通常源于事件处理器被**立即执行而非延迟调用**，导致状态更新触发无限循环渲染。本文以答题组件为例，详解错误根源、正确写法及最佳实践。
在 React 开发中，“Too many re-renders. React limits the number of renders to prevent an infinite loop.” 是一个典型且高频的运行时错误。它并非来自逻辑缺陷本身，而是源于对事件处理函数绑定方式的误解。
? 错误根源：onClick 中直接调用函数
观察原始代码中的关键片段：
<button onClick={handleCurrentquestion(item.iscorrect)} key={index}>
{item.option}
</button>这里 onClick 接收的是 handleCurrentquestion(item.iscorrect) 的执行结果（即一次状态更新调用），而非一个待用户点击时才执行的函数。这意味着：
✅ 组件首次渲染时，该行代码立即执行 handleCurrentquestion；
✅ 函数内调用 setScore 和 setCurrentquestion → 触发重渲染；
✅ 重渲染再次执行 map，再次立即调用 handleCurrentquestion → 无限循环。
这就是 React 渲染保护机制介入并抛出错误的根本原因。
✅ 正确写法：传递箭头函数或绑定回调
应确保 onClick 接收的是一个函数引用，仅在点击时执行：
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
<button
onClick={() => handleCurrentquestion(item.iscorrect)}
key={index}
>
{item.option}
</button>? 补充说明：也可使用 useCallback 进一步优化（尤其当 item.iscorrect 频繁变化时），但本例中箭头函数已足够安全，且语义清晰。
? 完整修复后的组件示例
import React, { useState } from 'react';
import { QuestionsResponce } from './constants/utils';
const Quizz = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const handleAnswerSelect = (isCorrect) => {
if (isCorrect) {
setScore(prev => prev + 1); // 推荐使用函数式更新，避免闭包 stale state
}
const nextQuestion = currentQuestion + 1;
if (nextQuestion < QuestionsResponce.length) {
setCurrentQuestion(nextQuestion);
}
// 若已到最后题，可选择显示结果页（见下方扩展建议）
};
// 防止访问越界（增强健壮性）
if (currentQuestion >= QuestionsResponce.length) {
return (
<div className="quiz-result">
<h2>Quiz Completed!</h2>
<p>Your score: <strong>{score}/{QuestionsResponce.length}</strong></p>
<button onClick={() => {
setCurrentQuestion(0);
setScore(0);
}}>Restart Quiz</button>
</div>
);
}
const { Question, Options } = QuestionsResponce[currentQuestion];
return (
<div className="quiz-container">
<h1>Question {currentQuestion + 1} / {QuestionsResponce.length}</h1>
<h2>{Question}</h2>
<div className="option-section">
{Options.map((item, index) => (
<button
key={index}
onClick={() => handleAnswerSelect(item.iscorrect)}
>
{item.option}
</button>
))}
</div>
<p>Current score: {score}</p>
</div>
);
};
export default Quizz;⚠️ 注意事项与进阶建议
- 避免闭包陷阱：setScore(score + 1) 使用了旧 score 值，推荐改用函数式更新 setScore(prev => prev + 1)，确保状态更新基于最新值；
- 边界防护：添加 currentQuestion >= QuestionsResponce.length 判断，防止数组越界报错；
- 性能考量：若选项数量多或需频繁重渲染，可用 useCallback 缓存 handleAnswerSelect，避免子组件不必要的重绘；
- 用户体验优化：答题完成后建议跳转至结果页，并提供重新开始按钮（如上例所示）。
掌握事件处理器的“传函数”而非“传调用结果”这一原则，是规避无限渲染错误的关键。它不仅是本例的解法，更是 React 函数式组件开发中的基础规范。
