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

 

报错的代码

import { useState } from "react";

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

  return (
    

      
展示的值：{count}
      增加+
    
  );
};

export default App;

解决：

import { useState } from "react";

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

  const addData = () => {
    // 直接在行内写会报错，在外部函数写就没有问题
    setCount(count + 1);
  };
  return (
    

      
展示的值：{count}
      增加+
    
  );
};

export default App;

原因：

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

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

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

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

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

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

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