\"Too many re-renders.React 限制渲染次数以防止无限循环\" 使用 useState 钩子时出错

【问题标题】："Too many re-renders. React limits the number of renders to prevent an infinite loop" error when useState hook is used\"Too many re-renders.React 限制渲染次数以防止无限循环\" 使用 useState 钩子时出错
【发布时间】：2022-09-27 13:43:05
【问题描述】：

import {useState} from \'react\';

const Counter = () =>{

    let [counter,setCounter] = useState(0);

    return(
       <div className=\'counter-box\'>
            <span>{counter}</span>
            <button onClick={setCounter(counter++)}></button>
       </div>
    )
}
export default Counter;

我在这里使用功能组件。有人可以告诉我我的代码有什么问题吗？

标签： reactjs react-hooks setstate infinite

【解决方案1】：

是的。这里onClick 函数在渲染时被执行，而不是用户点击事件。

解决方案1：

import {useState} from 'react';

const Counter = () =>{

    let [counter,setCounter] = useState(0);

    return(
       <div className='counter-box'>
            <span>{counter}</span>
            <button onClick={e => setCounter(counter+1)}></button>
       </div>
    )
}
export default Counter;

我们不执行代码，而是将函数引用（匿名箭头函数）传递给onClick 事件。

【讨论】：