ES6 - Avertissement: setState(...): Impossible de mettre à jour au cours de la transition d'état

Je suis la réécriture de certains vieux ReactJS code, et s'est coincé la fixation de cette erreur (l'erreur se répète environ 1700 fois dans la console, les DOM ne rend pas du tout):

Avertissement: setState(...): Impossible de mettre à jour lors d'un état existant
de transition (comme dans render ou d'un autre composant
le constructeur). Le rendu des méthodes doit être une pure fonction des accessoires et des
de l'état; constructeur effets secondaires sont un anti-modèle, mais peut être déplacé
pour componentWillMount.

Je suis un Composant qui passe de l'état bas à un composant qui devrait rendre certains contrôles. Basé sur l'cliqué contrôles, l'état doit changer, et de nouveaux contrôles devraient rendre.

Donc c'est mon composant Conteneur:

class TeaTimer extends Component {
constructor(props) {
super(props);
this.state = {
count: 120,
countdownStatus: 'started'
}
}
componentDidUpdate(prevProps, prevState) {
if (this.state.countdownStatus !== prevState.countdownStatus) {
switch (this.state.countdownStatus) {
case 'started':
this.startTimer();
break;
case 'stopped':
this.setState({count:0});
}
}
}
componentWillUnmount() {
clearInterval(this.timer);
delete this.timer;
}
startTimer() {
this.timer = setInterval(() => {
let newCount = this.state.count -1;
this.setState({
count: newCount >= 0 ? newCount : 0
});
if(newCount === 0) {
this.setState({countdownStatus: 'stopped'});
}
}, 1000)
}
handleStatusChange(newStatus) {
this.setState({ countdownStatus: newStatus });
}
render() {
let {count, countdownStatus} = this.state;
let renderStartStop = () => {
if (countdownStatus !== 'stopped') {
return <StartStop countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange()}/>
} else {
return <div>This will be the slider form</div>
}
};
return(
<div className={styles.container}>
<p>This is the TeaTimer component</p>
<Clock totalSeconds={count}/>
{renderStartStop()}
</div>
)
}
}

Et c'est mon composant de contrôles:

class StartStop extends Component {
constructor(props) {
super(props);
}
onStatusChange(newStatus) {
return() => {
this.props.onStatusChange(newStatus);
}
}
render() {
let {countdownStatus} = this.props;
let renderStartStopButton = () => {
if(countdownStatus === 'started') {
return <button onClick={()=> this.onStatusChange('stopped')}>Reset</button>;
} else {
return <button onClick={()=> this.onStatusChange('started')}>Start</button>
}
};
return(
<div className={styles.tt.Controls}>
{renderStartStopButton()}
</div>
)
}
}
StartStop.propTypes = {
countdownStatus: React.PropTypes.string.isRequired,
onStatusChange: React.PropTypes.func.isRequired
};

Je suis désolé pour le mur de texte, mais je ne peux vraiment pas trouver où est l'erreur vient - et donc ne sais pas quelle partie du code, je peux partir.

J'ai essayé la mise en œuvre de la solution trouvée dans un apparemment liés à la question, mais ne peut pas le faire fonctionner.

OriginalL'auteur Miha Šušteršič | 2017-01-02