React报错之Too many re-renders
总览
产生"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
钩子里面,以获得一个不会在不同渲染之间改变的记忆值。
React报错之Too many re-renders的更多相关文章
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- React报错 :browserHistory doesn't exist in react-router
由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...
- react报错 TypeError: Cannot read property 'setState' of undefined
代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...
- React报错之Cannot find name
正文从这开始~ .tsx扩展名 为了在React TypeScript中解决Cannot find name报错,我们需要在使用JSX文件时使用.tsx扩展名,在你的tsconfig.json文件中把 ...
- React报错之Cannot find namespace context
正文从这开始~ 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig. ...
- React报错之Expected `onClick` listener to be a function
正文从这开始~ 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function" ...
- React报错:Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,
今天在开发时报了以下错误,记录一下 我们不能在组件销毁后设置state,防止出现内存泄漏的情况 出现原因直接告诉你了,组件都被销毁了,还设置个锤子的state啊 解决方案: 利用生命周期钩子函数:co ...
- react报错this.setState is not a function
当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this. 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确. 错误示范: co ...
- React报错之useNavigate() may be used only in context of Router
正文从这开始~ 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only i ...
- React报错:Laravel React-Router browserHistory 刷新子页面报错404
举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route ...
随机推荐
- HDU3001 Travelling (状压DP)
题目没有起点限制,且每个节点至少访问1次,最多访问2次,所以用三进制数表示节点的状态(选取情况). 因为三进制数的每一位是0或1或2,所以预处理z状态S的第j位的数是有必要的. 边界条件:dp[tri ...
- python基础--简单数据类型预览
为了适应更多的使用场景,将数据划分为多种类型,每种类型都有各自的特点和使用场景, 帮助计算机高效的处理和展示数据.(比如数字用于数学运算.字符串用于信息传递.页面文字展示等) 1.数字类型 整型 ...
- VLQ & Base64 VLQ 编码方式的原理及代码实现
目录 VLQ Base64 VLQ VLQ VLQ (Variable-length quantity)是一种通用的,使用任意位数的二进制来表示一个任意大的数字的一种编码方式. 编码实现: ** 对数 ...
- Maximum Entropy Population-Based Training for Zero-Shot Human-AI Coordination
原文:https://www.cnblogs.com/Twobox/p/16791412.html 熵 熵:表述一个概率分布的不确定性.例如一个不倒翁和一个魔方抛到地上,看他们平稳后状态.很明显,魔方 ...
- java中list集合怎么判断是否为空
首先看下面代码 @RequestMapping("/getCatlist") public String getCatlist(HttpSession session,HttpSe ...
- 禁忌搜索算法TSA 旅行商问题TSP python
import math import random import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot ...
- Gitea 1.18 功能前瞻(其三):增强文本预览效果、继续扩展软件包注册中心、增强工单实用功能、完善了用户邀请机制和SEO
今天是 10 月 26 日星期三,Gitea 周期性地发布了 1.18 的第一个 RC0 版本,在此阶段会收集一些功能和使用上的问题,随后还会发布 RC1,新功能的完整性和健壮性会逐步趋近正式版. 继 ...
- Netty学习记录-入门篇
你如果,缓缓把手举起来,举到顶,再突然张开五指,那恭喜你,你刚刚给自己放了个烟花. 模块介绍 netty-bio: 阻塞型网络通信demo. netty-nio: 引入channel(通道).buff ...
- 基于FPGA的AES加解密IP
Programmable AES Encryption/ Decryption IP 可编程AES加解密IP 可编程AES加解密IP提供了加解密算法功能,兼容美国国家标准与技术研究院(NIST)发布的 ...
- 逆向使用 execjs时遇到 UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 28: illegal multibyte sequence
问题: 如下图所示 今天在维护以前的爬虫代码 发现有个网站一直爬取失败,我原以为是网站逆向的部分改了,搞了好久才发现是GBK的问题 接下来告诉大家解决方案 解决方案 如下图 在下图这个subbsubp ...