react错误：Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infini

react error:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Reason 1:

Wrong way:

<div className='article_item' onClick={ 
        toArticleDetail}>test</div>

Correct spelling:

//注： 函数必须是调用函数，而不是只写函数名，即里面要写为：toArticleDetail() 【函数名后面必须带上括号】
<div className='article_item' onClick={()=>{toArticleDetail()}}>test</div>

Reason 2:

When changing the page data, it is not placed in the useEffect method, causing the page to keep refreshing.
Wrong way:

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>
	);
}

Correct spelling:

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>
	);
}