React报错之Too many re-renders

最新推荐文章于 2024-06-16 23:40:21 发布

Web_boom

最新推荐文章于 2024-06-16 23:40:21 发布

阅读量4k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Android_boom/article/details/128643608

版权

本文分析了导致React 'Too many re-renders'错误的原因，包括在渲染过程中设置状态、无限循环的事件处理器和依赖问题。通过传递函数、管理依赖和使用记忆值来避免无限循环。此外，还提供了关于处理对象和数组依赖的建议。

摘要由CSDN通过智能技术生成

总览

产生"Too many re-renders. React limits the number of renders to prevent an infinite loop"错误有多方面的原因：

1.在一个组件的渲染方法中调用一个设置状态的函数。
2.立即调用一个事件处理器，而不是传递一个函数。
3.有一个无限设置与重渲染的useEffect钩子。

这里有个示例来展示错误是如何发生的：

import {useState} from 'react';

export default function App() {const [counter, setCounter] = useState(0);// ⛔️ Too many re-renders. React limits the number// of renders to prevent an infinite loop.return (<div><button onClick={setCounter(counter + 1)}>Increment</button><h1>Count: {counter}</h1></div>);
}

上述代码问题在于，我们在onClick事件处理器中立即调用了setCounter函数。

该函数是在页面加载时立即被调用，而不是事件触发后调用。

传递函数

为了解决该错误，为onClick事件处理器传递函数，而不是传递调用函数的结果。

import {useState} from 'react';

export default function App() {const [counter, setCounter] = useState(0);return (<div><button onClick={() => setCounter(counter + 1)}>Increment</button><h1>Count: {counter}</h1></div>);
}

现在，我们为事件处理器传递了函数，而不是当页面加载时调用setCounter方法。

如果该方法在页面加载时被调用，就会触发一个setState动作，组件就会无限重新渲染。

如果我们试图立即设置一个组件的状态，而不使用一个条件或事件处理器，也会发生这个错误。

import {useState} from 'react';

export default function App() {const [counter, setCounter] = useState(0);// ⛔️ Too many re-renders. React limits the number// of renders to prevent an infinite loop.setCounter(counter + 1);return (<div><h1>Count: {counter}</h1&