Почему мои дочерние компоненты не перерисовываются при изменении родительского состояния?

Question

Я создаю часы Pomodoro Clock с помощью React и наткнулся на проблему. Свойства моего дочернего компонента (BreakCounter) не обновляются при обновлении родительского состояния (App). Я пытаюсь передать это ребенку как реквизит, но это не меняется. Зачем? Как я могу обновить свойства дочернего компонента в соответствии с состоянием моего родителя?

HTML:

<div id="root"> </div>

JS:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakCounter: 5,
      sessionCounter: 27,
      mainTimerMins: 27,
      mainTimerSecs: 0
    };
  }

  reset = () => {
    this.setState = ({
      breakCounter: this.state.breakCounter = 5,
      sessionCounter: this.state.sessionCounter = 25,
      mainTimerMins: this.state.mainTimerMins = 25,
      mainTimerSecs: this.state.mainTimerSecs = 0
    });
  console.log(this.state);
  }

  breakCounterIncrement = () => {
    this.setState = ({
      breakCounter: this.state.breakCounter++
    })
    console.log('Parent State ' + this.state.breakCounter); 
    //parent's state is updating
  }
 breakCounterDecrement = () => {
   this.setState = ({
      breakCounter: this.state.breakCounter--
    })
    console.log('Parent State '+this.state.breakCounter)
 }


  render() {
    return (
      <div>
        <h1>Pomodoro Clock</h1>
        <BreakCounter inc={this.breakCounterIncrement} dec={this.breakCounterDecrement}  {...this.state}/>
        <SessionCounter session= {this.state.sessionCounter} />
        <MainTimer reset = {this.reset} mins={this.state.mainTimerMins} secs = {this.state.mainTimerSecs} />
      </div>
    );
  }
}

class BreakCounter extends React.Component {


  increment = () => {
    this.props.inc(true);
   console.log(this.props.breakCounter) //child props doesn't update
  }

  decrement = () => {
     this.props.dec(true);
    console.log('Child state ' +this.state.breakCounter)
  }

  render() {
    return (
      <div>
        <h1 id="break-label">Break Length</h1>
      <button id='break-increment' onClick={this.increment}><span>&#8593;</span></button>
        <div id='break-length' key={this.props.breakCounter}>{this.props.breakCounter}</div>
        <button id='break-decrement' onClick={this.decrement}><span>&#8595;</span></button>
      </div>
    );
  }
}

class SessionCounter extends React.Component {
  render() {
    return (
      <div>
        <h1 id="session-label">Session length</h1>
        <button id='session-increment'><span>&#8593;</span></button>
        <div id='session-length'>{this.props.session}</div>
        <button id='session-decrement'><span>&#8595;</span></button>
      </div>
    );
  }
}

class MainTimer extends React.Component {
  reset = () => {
    this.props.reset(true);
  }

  render() {
    return (
      <div>
        <h1 id="timer-label">Timer</h1>
        <div id="time-left">{this.props.mins}:{this.props.secs < 10 ? '0' + this.props.secs : this.props.secs} </div>
        <button id="start_stop">⏵︎⏸︎</button>
        <button id="reset" onClick = {this.reset}>Reset</button>
      </div>
    );
  }
}



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

Answer 1

В breakCounterIncrement,

breakCounterIncrement = () => { 
this.setState ({                                 // remove "=" 
breakCounter: ++this.state.breakCounter         //change increment 
              }) 
console.log('Parent State ' + this.state.breakCounter); 
//parent's state is updating 
}

Increment ++: Оба эти утверждения делают одно и то же: увеличивают счетчик на 1. Префиксная форма ++ counter увеличивает счетчик и возвращает новое значение. счетчик постфиксной формы ++ также увеличивает счетчик, но возвращает старое значение.

Подводя итог: Если результат инкремента / декремента не используется, нет никакой разницы, в какой форме мы используем. Если мы хотим увеличить значение и сразу использовать результат оператора, нам нужна форма префикса.