Question

我是react.js的初学者，我正在尝试实现一个简单的fizzbuzz示例。总的来说，我认为我得到了反应及其组件如何工作的要点，但当我尝试在codepen上运行此代码时，我收到此错误：

超出最大调用堆栈大小

这是我的代码：

class App extends React.Component {
  constructor(props){
  super(props);
  this.state = {
    value : '',
    number: 0
  };
  this.handleIncrement = this.handleIncrement.bind(this);
  this.handleDecrement = this.handleDecrement.bind(this);
  this.fizzBuzz = this.fizzBuzz.bind(this);
}

fizzBuzz(nb){
  if(nb % 15 == 0 && nb!= 0) 
    this.setState({value : `FizzBuzz `});
  else if(nb % 5 == 0 && nb!= 0) 
    this.setState({value : `Buzz `});
  else if(nb % 3 == 0 && nb!= 0)
    this.setState({value : `Fizz `});
  else  
    this.setState({value : ''});
}

handleIncrement() {
  let nb = this.state.number + 1;
  this.setState({number: nb});
  this.fizzBuzz(nb);
}
handleDecrement() {
  let nb =  this.state.number-1;
    if(nb >= 0) 
      { this.setState({number: nb}); 
        this.fizzBuzz(nb); 
      } 
    else 
    {
      this.setState({number: 0});
    }
  }

render() {
  return (
    <div>
      <h1> {this.state.number} </h1>
      <h1> {this.state.value} </h1>
      <input type="button" value="add" onClick={this.handleIncrement()} />
      <input type="button" value="sub" onClick={this.handleDecrement()} />
    </div>
      );
  }
}

ReactDOM.render(<App/>,document.getElementById('app'));

任何人都可以指出我做错了什么？在过去的两个小时里，我一直困扰着我。

最好的问候

Answer 1

onClick={this.handleIncrement()}表示立即评估函数handleIncrement，并将其返回值分配给onClick。

但是，handleIncrement通过调用this.setState({number: nb})来更新组件的状态。每次更新组件的状态时，都会重新呈现组件。因此，在您的情况下，您将获得一系列调用render -> handleIncrement -> render -> handleIncrement ...等等，因此您的错误（超出了最大调用堆栈大小）。

您不希望在onIncrement函数内立即评估render方法。相反，您希望在onClick事件的情况下对其进行评估。因此，您需要将函数handleIncrement的引用传递给onClick prop。

所以，你的代码应该是

<div type="button" value="add" onClick={this.handleIncrement} />

和handleDecrement类似。

我的reactjs代码中超出了最大调用堆栈大小

1 个答案: