網站首頁 編程語言 正文
總覽
產生"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);
// ??? your condition here
if (Math.random() > 0.5) {
setCounter(counter + 1);
}
return (
<div>
<h1>Count: {counter}</h1>
</div>
);
}
如果你像上面的例子那樣使用一個條件，請確保該條件不總是返回一個真值，因為這將導致無限的重新渲染循環。
"Too many re-renders. React limits the number of renders to prevent an infinite loop"錯誤也會在使用useEffect方法時發生，該方法的依賴會導致無限重新渲染。
import {useEffect, useState} from 'react';
export default function App() {
const [counter, setCounter] = useState(0);
useEffect(() => {
// ?? Too many re-renders. React limits the number
// of renders to prevent an infinite loop.
setCounter(counter + 1);
}); // ??? forgot to pass dependency array
return (
<div>
<h1>Count: {counter}</h1>
</div>
);
}
上述代碼問題在于，我們沒有為useEffect鉤子傳遞依賴數組。
這意味著該鉤子會在每次渲染時運行，它會更新組件的狀態，然后無限重新運行。
傳遞依賴
解決該錯誤的一種辦法是，為useEffect提供空數組作為第二個參數。
import {useEffect, useState} from 'react';
export default function App() {
const [counter, setCounter] = useState(0);
useEffect(() => {
setCounter(counter + 1);
}, []); // ??? empty dependencies array
return (
<div>
<h1>Count: {counter}</h1>
</div>
);
}
如果你為
useEffect方法傳遞空數組依賴作為第二個參數，該方法只在組件的初始渲染時運行。
該代碼將計數器遞增到1，并且不再運行，無論App組件是否被重新渲染。
如果你必須指定一個依賴來無限地重新渲染你的組件，試著尋找一個可以防止這種情況的條件。
import {useEffect, useState} from 'react';
export default function App() {
const [counter, setCounter] = useState(0);
useEffect(() => {
// ??? some condition here
if (Math.random() > 0.5) {
setCounter(counter + 1);
}
}, [counter]);
return (
<div>
<h1>Count: {counter}</h1>
</div>
);
}
有可能是某些邏輯決定了狀態是否應該被更新，而狀態不應該在每次重新渲染時被設置。
確保你沒有使用一個在每次渲染時都不同的對象或數組作為useEffect鉤子的依賴。
import {useEffect, useState} from 'react';
export default function App() {
const [address, setAddress] = useState({country: '', city: ''});
const obj = {country: 'Chile', city: 'Santiago'};
useEffect(() => {
// ?? Too many re-renders. React limits the number
// of renders to prevent an infinite loop.
setAddress(obj);
console.log('useEffect called');
}, [obj]);
return (
<div>
<h1>Country: {address.country}</h1>
<h1>City: {address.city}</h1>
</div>
);
}
問題在于，在JavaScript中，對象是通過引用進行比較的。obj變量存儲了一個具有相同鍵值對的對象，但每次渲染時的引用不同（在內存中的位置不同）。
移入依賴
解決該錯誤的一種辦法是，把這個對象移到useEffect鉤子里面，這樣我們就可以把它從依賴數組中移除。
import {useEffect, useState} from 'react';
export default function App() {
const [address, setAddress] = useState({country: '', city: ''});
useEffect(() => {
// ??? move object inside of useEffect
// and remove it from dependencies array
const obj = {country: 'Chile', city: 'Santiago'};
setAddress(obj);
console.log('useEffect called');
}, []);
return (
<div>
<h1>Country: {address.country}</h1>
<h1>City: {address.city}</h1>
</div>
);
}
傳遞對象屬性
另一個解決方案是將對象的屬性傳遞給依賴數組。
import {useEffect, useState} from 'react';
export default function App() {
const [address, setAddress] = useState({country: '', city: ''});
const obj = {country: 'Chile', city: 'Santiago'};
useEffect(() => {
setAddress({country: obj.country, city: obj.city});
console.log('useEffect called');
// ??? object properties instead of the object itself
}, [obj.country, obj.city]);
return (
<div>
<h1>Country: {address.country}</h1>
<h1>City: {address.city}</h1>
</div>
);
}
現在React不是在測試一個對象是否發生了變化，而是在測試obj.country和obj.city字符串在渲染之間是否發生了變化。
記憶值
另外，我們可以使用useMemo鉤子來獲得一個在不同渲染之間不會改變的記憶值。
import {useEffect, useMemo, useState} from 'react';
export default function App() {
const [address, setAddress] = useState({country: '', city: ''});
// ??? get memoized value
const obj = useMemo(() => {
return {country: 'Chile', city: 'Santiago'};
}, []);
useEffect(() => {
setAddress(obj);
console.log('useEffect called');
}, [obj]);
return (
<div>
<h1>Country: {address.country}</h1>
<h1>City: {address.city}</h1>
</div>
);
}
我們將對象的初始化包裹在useMemo鉤子里面，以獲得一個不會在渲染之間改變的記憶值。
我們傳遞給useMemo鉤子的第二個參數是一個依賴數組，它決定了我們傳遞給useMemo的回調函數何時被重新運行。
需要注意的是，數組在JavaScript中也是通過引用進行比較的。所以一個具有相同值的數組也可能導致你的useEffect鉤子被無限次觸發。
import {useEffect, useMemo, useState} from 'react';
export default function App() {
const [nums, setNums] = useState([1, 2, 3]);
const arr = [4, 5, 6];
useEffect(() => {
// ?? Too many re-renders. React limits the number
// of renders to prevent an infinite loop.
setNums(arr);
console.log('useEffect called');
}, [arr]);
return <div>{nums[0]}</div>;
}
數組在重新渲染之間存儲相同的值，但指向內存中的不同位置，并且在每次組件重新渲染時有不同的引用。
在處理數組時，我們用于對象的方法同樣有效。例如，我們可以使用useMemo鉤子來獲得一個在渲染之間不會改變的記憶值。
import {useEffect, useMemo, useState} from 'react';
export default function App() {
const [nums, setNums] = useState([1, 2, 3]);
const arr = useMemo(() => {
return [4, 5, 6];
}, []);
useEffect(() => {
setNums(arr);
console.log('useEffect called');
}, [arr]);
return <div>{nums[0]}</div>;
}
我們將數組的初始化包裹在useMemo鉤子里面，以獲得一個不會在不同渲染之間改變的記憶值。
原文鏈接：https://juejin.cn/post/7176637831199064123
相關推薦
- 2022-12-30 react中useState改變值不渲染的解決方式_React
- 2022-06-21 Android實現登錄界面的注冊功能_Android
- 2022-11-06 pandas?dataframe?drop函數介紹_python
- 2022-10-31 ViewPager實現圖片切換效果_Android
- 2022-10-05 Iptables防火墻四表五鏈概念及使用技巧詳解_安全相關
- 2022-01-18 移動端自適應布局（viewport+rem）
- 2022-04-28 Go語言錯誤處理異常捕獲+異常拋出_Golang
- 2022-03-18 C語言實現一個閃爍的圣誕樹_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速