React报错:Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
有的时候,会遇到这种错误,当看到这种错误的时候,最先需要排查的应该是看看事件是不是忘记写bind或者箭头函数了
错误的写法:
onClick={setTime(false)} //这样写表示直接调用了
正确的写法:
onClick={() => {
setTime(false);
}}
今天又遇到这个错误了,这次不是因为上面的原因,而是真的调用了太多次,代码放在下面
const [openStatus, setOpenStatus] = useState(false);
if (user) {
console.info('-----user------', user);
//
const { isStrongPassword } = user;
if (!isStrongPassword) {
//
setOpenStatus(true);
}
}
然后打开控制台看console日志
-----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
Layout.js:44 -----user------ {}
react-dom.development.js:14815 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
a
这次又是什么原因呢?
我自己的理解是因为更改了状态之后,重新绘制页面,然后就一直重复这个流程,所以死循环了,现在我改成了这样就可以了
const [openStatus, setOpenStatus] = useState(false);
useEffect(() => {
if (user) {
//
const { isStrongPassword } = user;
if (!isStrongPassword) {
//
setOpenStatus(true);
}
}
}, [user]);
我做前端还没有多久,很多前端知识并不是太好,如果有错误,希望能给我留言帮我指正一下,感激不尽
«上一篇:fork()函数子进程复制了父进程的哪些东西?(未完待续)
html换行规则:下一篇»
写的好啊
哈哈,一起学习