React:未捕获的范围错误:超出了最大调用堆栈大小

Question

我在玩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>
    );
  }
}

Answer 1

无限循环发生是因为您在生命周期函数中调用了this.addNums（）。addNum设置导致组件更新的状态，因此再次调用组件更新，因此循环继续。

您可以删除此函数，因为状态中存在num和num2，然后可以根据 num2在渲染中计算总数

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

Answer 2

在我的情况下，这是因为用于反应头盔组件的深度相等包装。我通过将版本从5.2.0增加到6.0.0测试版来修复它。