反应：未捕获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

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

您可以删除这个功能，因为num和num2有没有在国家和total可以然后只需在基于渲染被caluculated上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> 
    ); 
    } 
}