React로 숫자를 변경하는 함수가 제대로 작동하지 않습니다.

Question

버튼을 클릭하여 변수에 저장된 숫자를 변경하려고하지만 버튼을 처음 클릭해도 변수의 값은 변경되지 않지만 두 번째는 않습니다. 숫자가 1 씩 변경되므로 단추를 클릭하면 currentNumber += 1이 표시되고 변경된 후에는 console.log이 실행됩니다. 처음 클릭하면 기본값이 인쇄되고 두 번째로 클릭하면 실제로 변경되고 코드의 의도 된 기능이 엉망이됩니다. 나는 이것을 위해 React를 사용하고있다.

constructor(props) { 
 
\t  super(props); 
 
     this.state = { 
 
      currentSize: parseInt(this.props.size), 
 
      min: 4, 
 
      max: 40, 
 
     } 
 
    }; 
 
    
 
    
 
increaseSize(){ 
 
     this.setState({currentSize: this.state.currentSize + 1}, function(){ 
 
      if(this.state.currentSize >= this.state.max){ 
 
       this.state.currentSize = this.state.max; 
 
       this.state.isRed = true; 
 
      } else if(this.state.currentSize < this.state.max){ 
 
       this.state.isRed = false; 
 
      } 
 
     }); 
 
     console.log(this.state.currentSize); 
 
    }; 
 
    
 
render() { 
 
     var isBold = this.state.bold ? 'normal' : 'bold'; 
 
     var currentSize = this.state.currentSize; 
 
     var textColor = this.state.isRed ? 'red' : 'black'; 
 

 
     return(
 
       <div> 
 
       <button id="decreaseButton" hidden='true' onClick={this.decreaseSize.bind(this)}>-</button> 
 
       <span id="fontSizeSpan" hidden='true' style={{color: textColor}}>{currentSize}</span> 
 
       <button id="increaseButton" hidden='true' onClick={this.increaseSize.bind(this)}>+</button> 
 
       <span id="textSpan" style={{fontWeight: isBold, fontSize: currentSize}} onClick={this.showElements.bind(this)}>{this.props.text}</span> 
 
       </div> 
 
     ); 
 
    }

변수의 수는 표시하지만에서 볼 수있는 바와 같이 디스플레이되는 한 가변

내부 것과 다른 값을 갖는다 그림, 표시된 숫자는 26이지만 그 변수는 25입니다.

또한 카운터의 최소값과 최대 값을 설정했는지 확인할 수 있습니다. 두 값 중 하나에 도달하면 콘솔에서는 표시되지 않지만 디스플레이에서는 1이됩니다. 그래서 디스플레이에서는 3과 41시에 멈추지 만 콘솔에서는 4와 40으로 멈 춥니 다.

내가 뭘 잘못하고 있니?

편집 : 기본 값은 16이며 그 이유는 제대로 작동하지 않는 이유는 버튼을 처음 클릭하면 콘솔에 출력됩니다.

Answer 1

React가 비동기 적으로 변경 사항을 처리하기 때문에의 기능 버전을 사용하십시오. 설정시 값을 보장 할 수 없습니다. 이것은 또한 console.log을 사용하는 원인이기도합니다. 대신 같은 뭔가를 이동합니다

increaseSize(){ 
const aboveMax = this.state.currentSize >= this.state.max; 

this.setState(prevState => ({ 
    currentSize: aboveMax ? prevState.max : prevState.currentSize + 1, 
    isRed: aboveMax 
}) 
,() => console.log(this.state.currentSize)); 
}; 

또는, 당신은 setState() 콜백 함수로하지 않으려면 render() 방법에 콘솔 문을 이동합니다.

이

https://reactjs.org/docs/react-component.html#setstate뿐만 아니라 당신의 생성자에서 isRed을 설정하는 것을 잊지 마세요 :)