React组件无限循环问题：计数器代码无法正常递增求助

你的代码出现无限循环的核心原因及修复方案如下：

1. 触发无限循环的直接原因：onClick绑定错误 #

看按钮的这段代码：

<button onClick={this.add()} className="btn btn-secondary btn-sm">
  Increment
</button>

你写的this.add()会在组件每次渲染时直接执行add方法，而非按钮点击时才触发。add方法里调用了setState，而setState会强制组件重新渲染，渲染又会再次执行this.add()触发setState，如此反复就形成了无限循环。

正确写法是把方法本身传给onClick（不要加括号）：

<button onClick={this.add} className="btn btn-secondary btn-sm">
  Increment
</button>

2. 额外坑：方法的this绑定问题 #

改成上面的写法后，点击按钮会报错——class组件中普通方法默认不会绑定this，点击时this会是undefined，无法调用setState。解决方式任选其一：

• 在构造函数中绑定this：

constructor(props) {
  super(props);
  this.add = this.add.bind(this);
}

• 把add定义为箭头函数（自动绑定this）：

add = () => {
  this.setState((state) => {
    return { count: state.count + 1 };
  });
}

• 在onClick中用箭头函数包裹：

<button onClick={() => this.add()} className="btn btn-secondary btn-sm">
  Increment
</button>

3. 补充：计数器递增逻辑错误 #

你原代码里的add方法是直接把count设为5，不是递增，改成state.count + 1才能实现点击一次加1的效果。

修正后的完整代码示例 #

class Counter extends Component {
  state = {
    count: 0,
  };

  add = () => {
    this.setState((state) => {
      return { count: state.count + 1 };
    });
  };

  render() {
    let classes = this.getBadgeClasses();
    return (
      <React.Fragment>
        <span className={this.getBadgeClasses()}>{this.formatCounter()}</span>
        <button onClick={this.add} className="btn btn-secondary btn-sm">
          Increment
        </button>
      </React.Fragment>
    );
  }
}

内容的提问来源于stack exchange，提问作者liraz shitrit