как правильно соотнести кнопки и методы - reactjs

Question

Со мной такого никогда не случалось, пока я не попробовал изменить реквизиты разными способами, именами и значениями, я даже попытался создать метод для каждой кнопки. проблема в том, что кнопки не всегда делают то, что им положено, иногда они увеличивают «сеанс» или уменьшают «паузу» или наоборот

const breakdown="breakdown"
const breakup="breakup"
const sessionup="sessionup"
const sessiondown="sessiondown"
class Clock extends React.Component{
  constructor(){
    super()
    this.state={
      break:5,
      session:25,
      vid:false
    }
    this.handleChange=this.handleChange.bind(this)
  }
    handleChange(e){
      if(e.target.value===breakup){
        this.setState({
          break:this.state.break+1
        })
      }else if(e.target.value ==breakdown){
        this.setState({
          break:this.state.break-1
        })
      }else if(e.target.value==sessionup){
        this.setState({
          session:this.state.session+1
        })
      }else if(e.target.value==sessiondown){
        this.setState({
          session:this.state.session-1
        })
      }
    }
  
  
  render(){
    
    return(
      <div>
        <div id="title"><h1>Pamodoro Clock</h1></div>
        <div id="timing">
          <div id="break">
            <div id="break-label">Break Length</div>
            <div className="control">
              <button id="break-decrement" value={breakdown} onClick={this.handleChange}>
                <i className="fa fa-arrow-down"/>
              </button>
              <div id="break-length">{this.state.break}</div>
              <button id="break-increment" value={breakup}onClick={this.handleChange}>
                <i className="fa fa-arrow-up"/>
              </button>
            </div>
          </div>
          
          <div id="session">
            <div id="session-label">Session Length</div>
            <div className="control">
                <button id="serssion-decrement" value={sessiondown}onClick={this.handleChange}>
                  <i className="fa fa-arrow-down"/>
                </button>
              <div id="session-length">{this.state.session}</div>
                <button id="session-increment"value={sessionup}onClick={this.handleChange}>
                  <i className="fa fa-arrow-up"/>
                </button>
            </div>
          </div>
        </div>      
      </div> 
    )
  }
}

Answer 1

Из документации React :

Думайте о setState () как о запросе, а не о немедленной команде для обновления компонента. Для лучшего восприятия производительности React может отложить ее, а затем обновить несколько компонентов за один проход. React не гарантирует, что изменения состояния будут применены немедленно.

Это означает, что, когда вы используете this.setState({something: this.state...}) несколько раз, нет гарантии, что последний вызов будет вызван с последним состоянием.

Поэтому, чтобы предотвратить непредвиденные результаты, просто используйте updater:

this.setState(state => ({
  break: state.break+1
}))