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()生命周期函数中调用了componentDidUpdate。 addNums设置导致componentUpdate的状态，因此再次调用ComponentDidUpdate，因此循环继续。

您可以删除此功能，因为num和num2处于状态，total可以根据num和{{在渲染中进行计算1}}

num2

Answer 2

在我的情况下，这是因为deep-equal组件使用了react-helmet软件包。我通过将版本从5.2.0增加到6.0.0-beta来解决了这个问题。

React：Uncaught RangeError：超出最大调用堆栈大小

2 个答案: