Reactjs 在React中更新状态变量时超出了最大更新深度

我遇到的问题是，当我尝试在handleIncrement函数中调用setState时，我得到了超出最大更新深度的值，即使这是我唯一调用它的时间（不使用生命周期）。我试着在这个方法周围移动，看看它是否是一个带有react的bug

class Counter extends Component {
    state = {
        count: 0,
        tags: ['tag1', 'tag2', 'tag3']


    };

    handleIncrement = () => {

        this.setState({count: this.state.count+1});
    };
    render() {

        let classes = this.getBadgeClasses();
        return (
            <div>
                <span className={this.getBadgeClasses()}>{this.state.count}</span>
                <button onClick={this.handleIncrement()} className="btn btn-secondary btn-sm">Increment</button>
                <ul>
                    {this.state.tags.length === 0 && "Please create a new tag"}
                    {this.renderTags()}

                </ul>
            </div>
        );
    }

}

类计数器扩展组件{
状态={
计数：0，
标签：['tag1'，'tag2'，'tag3']
};
handleIncrement=（）=>{
this.setState（{count:this.state.count+1}）；
};
render（）{
让classes=this.getBadgeClasses（）；
返回(
{this.state.count}
增量

{this.state.tags.length==0&&“请创建一个新标记”}
{this.renderTags（）}

);
}
}

在渲染时调用

handleIncrement

函数，并将结果传递给

onClick

属性。所以它呈现，更新状态，状态已经改变，所以它呈现，更新状态

你可能想要

onClick={() => this.handleIncrement()}

或

---

在按钮元素的

onClick

中，您正在调用函数，而不是传递函数名本身。这会导致它反复更改状态，并导致错误

尝试将其更改为-

this.handleIncrement

onClick={() => this.handleIncrement()}

onClick={this.handleIncrement}