反應：未捕獲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> 
    ); 
    } 
}