React：Uncaught 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

あなたはcomponentDidUpdateライフサイクル機能でthis.addNums()を呼び出すので、無限ループがhappends。 addNumsはcomponentUpdateを発生させる状態を設定するため、再度ComponentDidUpdateが呼び出されるため、ループが続行されます。

あなたはこの機能を削除し、numとnum2以来状態にあるとtotalは、ちょうどnumにレンダリングもとにcaluculatedすることができ、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> 
    ); 
    } 
}