Javascript 反应：未捕获范围错误：超过最大调用堆栈大小

我在玩React，我得到了我想要的功能，但是由于某个地方有一个无限循环，所以速度非常慢。我相信它存在于组件生命周期方法中，但我不确定如何重新格式化下面的代码，使其具有相同的功能，但没有无限循环。如对最佳实践有任何建议，将不胜感激

class App extends Component {
  constructor() {
    super();
    this.state = {
      num: 13,
      num2: 10,
      total: 0
    }
  }

  componentDidMount() {
    this.addNums();
  }

  componentDidUpdate() {
    this.addNums();
  }

  addNums(){
    var added = parseInt(this.state.num) + parseInt(this.state.num2);
    this.setState({total: parseInt(added)});
  }

  change(num) {
    this.setState({num: num});
    console.log(this.state);
  }
  change2(num2) {
    this.setState({num2: num2});
    console.log(this.state);
  }

  render(){
    return (
      <div>
        <TopBar />
        <Combinatoric test={this.state.num} changeNumber={this.change.bind(this)}/>
        <Combinatoric test={this.state.num2} changeNumber={this.change2.bind(this)}/>
        <h2>Total: {this.state.total}</h2>
        <h1>hello world</h1>
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数字：13，
num2:10，
总数：0
}
}
componentDidMount（）{
this.addNums（）；
}
componentDidUpdate（）{
this.addNums（）；
}
addNums（）{
var added=parseInt（this.state.num）+parseInt（this.state.num2）；
this.setState（{total:parseInt（added）}）；
}
更改（num）{
this.setState（{num:num}）；
console.log（this.state）；
}
变更2（num2）{
this.setState（{num2:num2}）；
console.log（this.state）；
}
render（）{
返回(
总计：{this.state.Total}
你好，世界
);
}
}

无限循环之所以发生，是因为您在

componentdiddupdate

生命周期函数中调用了

this.addNums（）

addNums

设置导致componentUpdate的状态，因此再次调用

ComponentDidUpdate

，从而继续循环

您可以删除此函数，因为状态中存在

num

和

num2

，因此可以根据

num

和

num2

在渲染中计算

total

class App extends Component {
  constructor() {
    super();
    this.state = {
      num: 13,
      num2: 10,
      total: 0
    }
  }


  change(num) {
    this.setState({num: num});
    console.log(this.state);
  }
  change2(num2) {
    this.setState({num2: num2});
    console.log(this.state);
  }

  render(){
    var total = parseInt(this.state.num) + parseInt(this.state.num2);
    return (
      <div>
        <TopBar />
        <Combinatoric test={this.state.num} changeNumber={this.change.bind(this)}/>
        <Combinatoric test={this.state.num2} changeNumber={this.change2.bind(this)}/>
        <h2>Total: {total}</h2>
        <h1>hello world</h1>
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数字：13，
num2:10，
总数：0
}
}
更改（num）{
this.setState（{num:num}）；
console.log（this.state）；
}
变更2（num2）{
this.setState（{num2:num2}）；
console.log（this.state）；
}
render（）{
var total=parseInt（this.state.num）+parseInt（this.state.num2）；
返回(
总计：{Total}
你好，世界
);
}
}

在我的例子中，这是因为

组件使用了
deep equal
包。我通过将版本从
5.2.0
增加到
6.0.0-beta
componentdiddupdate
调用
addNums
，调用
this.setState
，从而导致组件更新。不要将
total
存储在状态中-您始终可以在
渲染中正确计算它
@MayankShukla没有看到在componetdimount中也调用了该函数。已删除itIt将
parseInt
移动到事件处理程序也有意义。