react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of rende-优快云博客

本文链接：https://blog.youkuaiyun.com/wbskb/article/details/131867483

文章解释了在React组件中遇到无限循环渲染错误的原因，包括直接修改状态、在render方法中调用setState、条件判断缺失退出条件、不稳定的依赖项和递归组件未设置停止条件。解决方案是确保状态更新的正确性和依赖项管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错的代码

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(10);

  return (
    <div>
      <p>展示的值：{count}</p>
      <button onClick={setCount(count + 1)}>增加+</button>
    </div>
  );
};

export default App;

解决：

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(10);

  const addData = () => {
    // 直接在行内写会报错，在外部函数写就没有问题
    setCount(count + 1);
  };
  return (
    <div>
      <p>展示的值：{count}</p>
      <button onClick={addData}>增加+</button>
    </div>
  );
};

export default App;

原因：

这个错误通常表示在React组件中存在无限循环的渲染。React有一个机制来限制重复渲染的次数，防止无限循环导致页面卡死。

导致这个错误的原因有很多种，下面是一些可能导致无限循环渲染的常见情况和解决方法：

在组件中直接或间接地修改了组件的状态（state）：当组件状态发生变化时，React会重新渲染组件。如果在渲染过程中修改了状态，即使是间接地，会导致无限循环。解决方法是确保状态的更新仅在必要时进行，并避免在渲染过程中修改状态。

在组件的render方法中调用了setState：在render方法中调用setState方法会触发新一轮的渲染，从而导致无限循环。解决方法是将setState的调用移到其他生命周期方法中，或使用useEffect钩子来进行状态更新。

在条件判断中忘记添加退出条件：如果在条件判断中没有提供合适的退出条件，可能会导致组件无限循环重新渲染。请确保在循环判断中添加正确的退出条件。

不稳定的依赖项导致重复渲染：在使用useEffect或类组件的生命周期方法时，需要指定依赖项数组，以确保只有在依赖项发生变化时才执行相应的代码。如果依赖项不稳定或不正确地设置，可能会导致重复渲染。请检查并修复依赖项数组。

使用递归组件时没有正确设置停止条件：如果使用递归组件，必须确保设置了停止条件，否则会导致无限递归渲染。请检查递归组件的实现，并添加合适的停止条件。