최대 호출 스택 크기가 내 reactjs 코드를 초과했습니다.

Question

나는 react.js의 초보자입니다. 간단한 fizzbuzz 예제를 구현하려고합니다.

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')); 

: 여기

maximum call stack size exceeded

내 코드입니다 : 전반적으로, 나는 반응과 그 구성 요소가 작동하지만 내가 codepen에이 코드를 실행하려고 할 때, 나는이 오류를 얻을 방법의 요점을 가지고 생각

누군가 내가 실수 한 것을 지적 할 수 있습니까? 지난 2 시간 동안 나를 혼란스럽게 만들었다.

안부

Answer 1

onClick={this.handleIncrement()}는 handleIncrement 즉시 평가 함수를 의미하며, 그 반환 값 onClick 할당된다.

그러나 handleIncrement은 this.setState({number: nb})을 호출하여 구성 요소의 상태를 업데이트합니다. 구성 요소의 상태가 업데이트 될 때마다 구성 요소가 다시 렌더링됩니다. 따라서, 귀하의 경우에는 render -> handleIncrement -> render -> handleIncrement ... 등의 체인이 있으므로 오류 (최대 호출 스택 크기 초과)가 발생합니다.

onIncrement 메서드가 render 함수 내에서 즉시 평가되기를 원하지 않습니다. 오히려 onClick 이벤트의 경우에 평가되기를 원합니다. 따라서 기능 handleIncrement에 대한 참조를 onClick 소품에 전달해야합니다.

그래서, 당신의 코드는

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

및 handleDecrement 비슷한을해야합니다.