ReactJS Ändern des übergeordneten Stils verursacht RangeError: Maximale Größe des Aufrufstapels überschritten

Question

Ich erhalte diesen Fehler, wenn ich versuche, einen übergeordneten Stil basierend auf einer Logik in der untergeordneten Komponente zu ändern.

RangeError: Maximale Call-Stack-Größe überschritten.

Ich habe versucht, den Aufruf der Eltern in ComponentWillUpdate und ComponentShouldUpdate sowie andere Lebenszyklus-Ereignisse zu ändern und es scheint einfach nicht zu funktionieren.

Hier ist ein Jsbin zu sehen, was vor sich geht. Am Ende der Folien sollte der Hintergrund weiß werden, was es tut, aber es wirft auch den Fehler und bewirkt, dass die App nicht mehr funktioniert.

https://jsbin.com/mahocuq/edit?html,js,console,output

componentWillUpdate() { 
    if(this.props.slideNum === 2){ 
     this.changeStyle("#fff") 
    } 
    console.log(this.props.slideNum); 
} 

Answer 1

Ihr Zustand sagt, dass auf Update, wenn Sie auf Folie zwei sind, ein Update auf die Eltern auslösen.

Wenn Sie das übergeordnete Element aktualisieren, werden die Requisiten an das untergeordnete Element weitergegeben und lösen ein Update aus. Sie erstellen eine Endlosschleife.

Sie würden wahrscheinlich die Hintergrundfarbe übergeben, damit Sie überprüfen können, ob Sie es erwarten und Sie keine weiteren Updates benötigen. Ziemlich nicht getestet, aber so etwas wie dies funktionieren soll:

<Slides 
    currentBackgroundColor={this.state.backgroundColor} 
    ChangeParentStyle={this.ChangeParentStyle.bind(this)} 
    slideNum={this.state.slideNum} 
/> 

... 
class Slides extends React.Component { 
    componentWillUpdate() { 
     if(this.props.slideNum === 2 && this.props.currentBackgroundColor !== `#fff`){ 
      this.props.ChangeParentStyle(`#fff`); 
     } 
    }