解决“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”

解决“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”

问题:

import {useState, Fragment} from 'react';
import Add from './dialogAdd';

function Top() {
	const [visible, setVisible] = useState(false);
	const isVisible = (flag) => {
		setVisible(flag)
	}
	return(
		<Fragment>
			<div className="top">
				<h2>this is the top<span onClick={isVisible(true)}></span></h2>
			</div>
		</Fragment>
	)
}
export default Top;

控制台提示:“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”


原因:

花括号之间的所有值都会立即求值。这将导致在每个呈现循环中调用 isVisible 函数。

通过使用箭头函数包装函数,计算后的代码将生成一个函数,该函数可以在用户单击按钮时调用。


改为:

import {useState, Fragment} from 'react';
import Add from './dialogAdd';

function Top() {
	const [visible, setVisible] = useState(false);
	const isVisible = (flag) => {
		setVisible(flag)
	}
	return(
		<Fragment>
			<div className="top">
				<h2>this is the top<span onClick={()=> isVisible(true)}></span></h2>
			</div>
		</Fragment>
	)
}
export default Top;

总结:
出现无限循环的原因是事件回调中触发了重新呈现,最常见setState触发的,这将再次调用事件回调,并导致React停止并抛出“太多的重新呈现”的错误

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值