react · JavaScript
报错原文
Too many re-renders. React limits the number of renders to prevent an infinite loop.
这是什么意思
一次渲染改了状态，这个状态又触发了下一次渲染，React 为了不让它无限下去把这个环截断了。几乎总是「该传函数的地方把函数调用了」：onClick={setOpen(true)} 每次渲染都会立刻执行，正确写法是 onClick={() => setOpen(true)}。另外两种常见形态是在渲染函数体里直接改状态，以及 useEffect 的依赖数组里放了它自己会更新的值。把改状态的动作搬进事件处理函数或 useEffect；如果这个值渲染时算一下就有，不妨反问它是否需要成为状态。
怎么修
这个没有一行命令能解决。说明里写了该看哪里。
- 来自
- react
- JavaScript
- 15
浏览器和 node 的错误通常只告诉你什么坏了，不告诉你那个值为什么变成这样——你读了 undefined、它不是函数、它不是 JSON——所以该修的地方在抛错那一行的上游；只用 ?. 和默认值把那一行按住，同样的问题会在更远的地方、以更难辨认的样子回来。
怎么读报错
- 从第一行往下读。越往下越是工具内部的事，起因通常写在最上面。
- 有文件名和行号就从那里查——不是栈顶那一帧，而是最上面那条提到你自己写的文件的行。
- 把报错原文照样去搜，但先去掉你自己的路径和变量名，正是那些让搜索匹配不上。
- 同一种情况在不同版本里措辞不同。结果不对头，就把版本号一起加进查询。
- 粘贴修法之前，先确认它会丢掉什么。这里面有些是不能撤回的。
常见问题
Q. “Too many re-renders. React limits the number of renders to prevent an infinite loop.” 是什么意思？
一次渲染改了状态，这个状态又触发了下一次渲染，React 为了不让它无限下去把这个环截断了。几乎总是「该传函数的地方把函数调用了」：onClick={setOpen(true)} 每次渲染都会立刻执行，正确写法是 onClick={() => setOpen(true)}。另外两种常见形态是在渲染函数体里直接改状态，以及 useEffect 的依赖数组里放了它自己会更新的值。把改状态的动作搬进事件处理函数或 useEffect；如果这个值渲染时算一下就有，不妨反问它是否需要成为状态。
Q. 怎么修？
没有一行命令能解决。上面的说明写了该看哪里。
Q. 这是哪个工具报的？
react。它属于JavaScript，报错原文有 14 个词。
相关报错
RangeError: Maximum call stack size exceedednodeEach child in a list should have a unique "key" prop.reactUncaught TypeError: Cannot read properties of undefined (reading 'name')chromeTypeError: items.map is not a functionchromeSyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSONchrome 111+SyntaxError: Unexpected end of JSON inputchromeTypeError: Failed to fetchchromeAccess to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.chrome