Reactで数値を変更する関数が正常に動作しない

Question

ボタンをクリックして変数に格納された数値を変更しようとしていますが、ボタンをクリックすると変数の値は変更されません。もう一つはします。番号を1ずつ増やしていくので、ボタンをクリックするとcurrentNumber += 1が表示され、変更後にはconsole.logが実行されます。私が最初にクリックすると、デフォルト値が表示されます.2回目にクリックすると、実際には変更され、意図したコードの機能が損なわれます。私はこのために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> 
 
     ); 
 
    }

は、変数内の数字は、表示されていますが、中に見ることができるように表示されている1は、変数

内部のいずれかに異なる値を持ちます画像、表示される数字は26ですが、変数は25です。

さらに、カウンタの最小値と最大値を設定していることがわかります。いずれかの値に達すると、ディスプレイには1つずつ表示されますが、コンソールには表示されません。ディスプレイでは3と41で停止しますが、コンソールでは4と40で停止します。

私は間違っていますか？

編集：デフォルト値は16です。これは、初めてボタンをクリックしたときにコンソールに表示されるものなので、正しく動作しません。

Answer 1

Reactが状態の変更を非同期に処理するため、設定時にその値を保証することはできませんので、setState()の機能バージョンを使用してください。これはまた、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()方法にコンソール文を移動します。

は同様にあなたのコンストラクタでisRedを設定することを忘れないでくださいhttps://reactjs.org/docs/react-component.html#setstate

を参照してください:)