Question

我遇到的问题是，当我尝试在handleIncrement函数中调用setState时，即使这是我唯一一次调用它（不使用生命周期），我仍然超过了最大更新深度。我已经尝试过该方法，看看它是否是带有react的错误

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>
        );
    }

}

Answer 1

onClick={this.handleIncrement()}

您正在渲染时调用handleIncrement函数，并将结果传递到onClick道具。所以它渲染，更新状态，状态已更改，所以它渲染，更新状态...

您可能想要

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

或

onClick={this.handleIncrement}

Answer 2

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

尝试将其更改为-this.handleIncrement

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

2 个答案: