React报错:Too many re-renders. React limits the number of renders to prevent an infinite loop.
Too many re-renders. React limits the number of renders to prevent an infinite loop.
翻译一下:太多重复渲染,React限制渲染次数防止无限循环
报错代码
// 函数useState使用
import React from "react";
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div>我是组件app <button onClick={ setCount(count + 1)}> {count} </button> </div>
)
}
export default App;
解决报错
// 函数useState使用
import React from "react";
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div>我是组件app <button onClick={ () => setCount(count + 1)}> {count} </button> </div>
)
}
export default App;
分析
错误代码中,在渲染阶段setCount
函数是立即执行的,造成不停的渲染,引起报错
套一个箭头函数可在点击后执行
个人理解,仅供参考