Question

我正在用React构建一个Pomodoro Clock时间，偶然发现了一个问题。当父级（App）状态正在更新时，我的子级（BreakCounter）道具不会更新。我正在尝试将其作为道具传递给孩子，但它没有改变。为什么？如何使我的孩子道具道具更新为我父母的状态？

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 
}

增量++：
这两个语句的作用相同：将计数器增加1。
前缀形式++ counter递增counter并返回新值。后缀形式counter ++也会使counter递增，但返回旧值。

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

为什么我的孩子组件不根据父母的状态变化重新渲染？

1 个答案: