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

在使用react hooks时候，使用了嵌套组件，代码如下

然后会报一个错误“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”

修改后代码：

 

原因：

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

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

后话：

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