解决“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停止并抛出“太多的重新呈现”的错误