[英]Why my child components does not re-render on parent's state change?
I'm building a Pomodoro Clock time with React and stumbled upon a problem.我正在使用 React 构建番茄钟时间并偶然发现了一个问题。 My Child component's (BreakCounter) props do not update when parent's (App) state is updating.当父级 (App) state 更新时,我的子组件 (BreakCounter) 道具不会更新。 I'm trying to pass it as props to child but it doesn't change.我试图将它作为道具传递给孩子,但它没有改变。 Why?为什么? How can I make my child component props update with my parent's state?如何使用我父母的 state 更新我的子组件道具?
HTML: HTML:
<div id="root"> </div>
JS: 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>↑</span></button>
<div id='break-length' key={this.props.breakCounter}>{this.props.breakCounter}</div>
<button id='break-decrement' onClick={this.decrement}><span>↓</span></button>
</div>
);
}
}
class SessionCounter extends React.Component {
render() {
return (
<div>
<h1 id="session-label">Session length</h1>
<button id='session-increment'><span>↑</span></button>
<div id='session-length'>{this.props.session}</div>
<button id='session-decrement'><span>↓</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'))
In breakCounterIncrement,在 breakCounterIncrement 中,
breakCounterIncrement = () => {
this.setState ({ // remove "="
breakCounter: ++this.state.breakCounter //change increment
})
console.log('Parent State ' + this.state.breakCounter);
//parent's state is updating
}
Increment ++:增量++:
Both of these statements do the same thing: increase counter by 1.这两个语句都做同样的事情:将 counter 增加 1。
The prefix form ++counter increments counter and returns the new value.前缀形式 ++counter 递增 counter 并返回新值。 the postfix form counter++ also increments counter but returns the old value.后缀形式 counter++ 也增加 counter 但返回旧值。
To summarize:总结一下:
If the result of increment/decrement is not used, there is no difference in which form we use.如果不使用递增/递减的结果,我们使用哪种形式没有区别。
If we'd like to increase a value and immediately use the result of the operator, we need the prefix form.如果我们想增加一个值并立即使用运算符的结果,我们需要前缀形式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.