私のreactjsコードで最大呼び出しスタックサイズを超えました

Question

私はreact.jsの初心者です。私は簡単なfizzbuzzの例を実装しようとしています。

maximum call stack size exceeded

ここに私のコードです：

class App extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
    value : '', 
    number: 0 
    }; 
    this.handleIncrement = this.handleIncrement.bind(this); 
    this.handleDecrement = this.handleDecrement.bind(this); 
    this.fizzBuzz = this.fizzBuzz.bind(this); 
} 

fizzBuzz(nb){ 
    if(nb % 15 == 0 && nb!= 0) 
    this.setState({value : `FizzBuzz `}); 
    else if(nb % 5 == 0 && nb!= 0) 
    this.setState({value : `Buzz `}); 
    else if(nb % 3 == 0 && nb!= 0) 
    this.setState({value : `Fizz `}); 
    else 
    this.setState({value : ''}); 
} 

handleIncrement() { 
    let nb = this.state.number + 1; 
    this.setState({number: nb}); 
    this.fizzBuzz(nb); 
} 
handleDecrement() { 
    let nb = this.state.number-1; 
    if(nb >= 0) 
     { this.setState({number: nb}); 
     this.fizzBuzz(nb); 
     } 
    else 
    { 
     this.setState({number: 0}); 
    } 
    } 

render() { 
    return (
    <div> 
     <h1> {this.state.number} </h1> 
     <h1> {this.state.value} </h1> 
     <input type="button" value="add" onClick={this.handleIncrement()} /> 
     <input type="button" value="sub" onClick={this.handleDecrement()} /> 
    </div> 
    ); 
    } 
} 

ReactDOM.render(<App/>,document.getElementById('app')); 

全体的に、私は私がどのように反応するかの要点を持って、そのコンポーネントが動作しますが、私はcodepenにこのコードを実行しようとすると、私はこのエラーが出ると思います

私は何を間違えたのか誰でも指摘できますか？私は最後の2時間私を困惑させている。

よろしく

Answer 1

onClick={this.handleIncrement()}は機能handleIncrementはすぐに評価され、その戻り値はonClickに割り当てられていることを意味します。

ただし、handleIncrementは、this.setState({number: nb})を呼び出してコンポーネントの状態を更新します。コンポーネントの状態が更新されるたびに、コンポーネントが再レンダリングされます。したがって、あなたのケースでは、render -> handleIncrement -> render -> handleIncrement ...などの連鎖が得られます。したがって、エラー（最大呼び出しスタックサイズを超えました）。

onIncrementメソッドをrender関数内ですぐに評価する必要はありません。むしろonClickイベントの場合に評価されることを望みます。したがって、あなたのonClick支柱に関数handleIncrementへの参照を渡す必要があります。

だから、あなたのコードはhandleDecrementため

<div type="button" value="add" onClick={this.handleIncrement} /> 

と類似していなければなりません。