react：未捕获的范围错误：超出最大调用堆栈大小

IT技术 javascript reactjs
2021-05-26 03:43:04

我正在玩 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>
    );
  }
}
2个回答

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

无限循环的发生是因为您调用this.addNums()了componentDidUpdate生命周期函数。addNums设置导致 componentUpdate 并因此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>
    );
  }
}
其它你可能感兴趣的问题
上一篇我应该使用 beforeEach() 安装并为每个测试设置props还是在每个测试开始时安装特定组件？（使用酶、柴和摩卡） 下一篇如何呈现变量（或props）内的 jsx/html？