React报错：Too many re-renders. React limits the number of renders to prevent an infinite loop 寻求解决帮助

开发者阿泽

2026-4-29

解决React "Too many re-renders" 报错的核心问题

嘿，刚看了你的代码，一眼就揪出问题所在了——这是React新手很容易踩的坑，别慌！咱们一步步来梳理：

1. 无限循环的根源：按钮的`onClick`写法错误

先看你代码里的这个按钮：

<button className="btn" onClick={setCreating(true)}>
  Create Event
</button>

你直接把setCreating(true)写在了onClick属性里，这会导致组件每次渲染时都会立刻执行这个状态更新函数。状态一更新就触发组件重新渲染，重新渲染又会再次调用setCreating(true)，如此往复形成无限循环，React为了保护程序只能抛出"Too many re-renders"的报错。

修复方法：

把onClick改成箭头函数包裹，确保只有点击按钮时才会触发状态更新：

<button className="btn" onClick={() => setCreating(true)}>
  Create Event
</button>

2. 顺带修正其他潜在问题

除了上述核心报错，你的代码还有两个小细节需要调整：

useRef用法错误：你尝试用对象解构获取多个ref，但useRef(null)返回的是单个带current属性的对象，正确的写法是为每个ref单独声明：
```
const titleElRef = useRef(null);
const priceElRef = useRef(null);
const dateElRef = useRef(null);
const descriptionElRef = useRef(null);
```
未定义变量问题：你声明了const event = { title, price, date, description };，但代码里没有定义title、price这些变量，这会导致另一个报错，记得补充变量定义或者删除无用的event声明。