反应：未捕获的 RangeError：超出最大调用堆栈大小

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

在我的情况下，这是因为 deep-equal 包用于 react-helmet 组件。我通过将版本从 5.2.0 增加到 6.0.0-beta 来修复它。

Answer 2

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

您可以删除此函数，因为 num 和 num2 处于状态中，所以 total 可以根据 num 和 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>
    );
  }
}