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

maximum call stack size exceeded in my reactjs code

本文关键字：调用 堆栈 我的 ReactJS 代码 中超      更新时间：2023-09-26

我是反应的初学者.js，我正在尝试实现一个简单的嘶嘶声示例。总的来说，我想我了解了 react 及其组件的工作原理，但是当我尝试在代码笔上运行此代码时，出现此错误：

超出最大调用堆栈大小

这是我的代码：

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

任何人都可以指出我犯了什么错误？ 在过去的两个小时里，我一直感到困惑。

此致敬意

onClick={this.handleIncrement()}表示函数handleIncrement立即被计算，其返回值被分配给onClick。

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

您不希望在 render 函数中立即计算onIncrement方法。相反，您希望在发生onClick事件时对其进行评估。因此，您需要将对函数的引用handleIncrement传递给您的onClick道具。

所以，你的代码应该是

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

和类似的handleDecrement.

相关文章：