为什么我的子组件不会在父级的 state 更改上重新渲染？

Question

我正在使用 React 构建番茄钟时间并偶然发现了一个问题。 当父级 (App) state 更新时，我的子组件 (BreakCounter) 道具不会更新。 我试图将它作为道具传递给孩子，但它没有改变。 为什么？ 如何使用我父母的 state 更新我的子组件道具？

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 
}

增量++：
这两个语句都做同样的事情：将 counter 增加 1。
前缀形式 ++counter 递增 counter 并返回新值。 后缀形式 counter++ 也增加 counter 但返回旧值。

总结一下：
如果不使用递增/递减的结果，我们使用哪种形式没有区别。
如果我们想增加一个值并立即使用运算符的结果，我们需要前缀形式。