总览
产生"Too many re-renders. React limits the number of renders to prevent an infinite loop"错误有多方面的原因:
- 在一个组件的渲染方法中调用一个设置状态的函数。
- 立即调用一个事件处理器,而不是传递一个函数。
- 有一个无限设置与重渲染的
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>
</div>
);
}
问题在于,setCounter
函数在组件渲染时被调用、更新状态,并导致重新渲染,而且是无限重新渲染。
你可以通过向useState()
钩子传递一个初始值或一个函数来初始化状态,从而解决这个错误。
import {useState} from 'react';
export default function App() {
const [counter, setCounter] = useState(() => 100 + 100);
return (
<div>
<h1>Count: {counter}</h1>
</div>
);
}
我们向useState
方法传递了一个函数。这个函数只会在组件第一次渲染时被调用,并且会计算出初始状态。你也可以直接向useState
方法传递一个初始值。
另外,你也可以像前面的例子那样使用一个条件或事件处理器。
import {useState} from 'react';
export default function App() {
const [counter, setCounter] = useState(0);
//
标签:const,setCounter,渲染,many,counter,React,报错,useState,useEffect
From: https://www.cnblogs.com/chuckQu/p/16980859.html