react错误:Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infini
react错误:
Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
信铁寒胜:
更改页面数据时未放到useEffect方法内,导致页面一直在刷新。
原因1:
错误写法:
<div className='article_item' onClick={toArticleDetail}>test</div>
正确写法:
//注: 函数必须是调用函数,而不是只写函数名,即里面要写为:toArticleDetail() 【函数名后面必须带上括号】 <div className='article_item' onClick={()=>{toArticleDetail()}}>test</div>
原因2:
更改页面数据时未放到useEffect方法内,导致页面一直在刷新。
错误写法:
import React, { Suspense, useState, useEffect } from "react"; import { connect, useSelector } from "react-redux"; function App() { let userMessage = useSelector((state: any) => state.userMessage); let [isLogin, setIsLogin] = useState(false); if (userMessage.userName && userMessage.userId) { setIsLogin(true); // 该处数据更新造成页面不断刷新 } return ( <div>{isLogin}</div> ); }
正确写法:
import React, { Suspense, useState, useEffect } from "react"; import { connect, useSelector } from "react-redux"; function App() { let userMessage = useSelector((state: any) => state.userMessage); let [isLogin, setIsLogin] = useState(false); //使用useEffect(()=>{},[]) //页面只更新一次 useEffect(() => { if (userMessage.userName && userMessage.userId) { setIsLogin(true); } }, []); return ( <div>{isLogin}</div> ); }
参考: