React报错：Too many re-renders

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函数是立即执行的，造成不停的渲染，引起报错

套一个箭头函数可在点击后执行

个人理解，仅供参考