React Redux Lifecycle Requisiten

Question

Ich benutze reagieren und redux für eine Web-Anwendung, die ich baue.

In den meisten Fällen funktioniert alles gut, aber ich habe ein großes Problem, wenn es darum geht, Requisiten von den Eltern zu übergeben.

Ich habe eine Hauptkomponente, die Redux verbindet und erhält meinen Speicher. Ich gebe die Requisiten gerade gut:

{ this.props.children && React.cloneElement(
    this.props.children, 
    { 
     preset: this.state.preset, 
     children: this.state.babies, 
     child: this.state.currentChild, 
     name: this.state.firstName, 
    } 
)} 

So meine bestimmte Seite bekommt diese Requisiten. Ich übergebe dann benötigte Requisiten an untergeordnete Komponenten, kann jedoch nicht auf die Requisiten bei mount oder anderen Lifecycle-Methoden zugreifen, die reagieren. Der einzige Ort, sie scheinen vorhanden zu sein, ist in dem Verfahren machen, und das ist nach einer undefinierten Kontrolle durchführen:

let child = this.props.child; 

if(child.birthdate != undefined) { 
    // do stuff here 
} 

Es sieht aus wie ich nicht definiert erhalte zweimal dann schließlich Requisiten kommen und ich bin in der Lage, mit ihnen zu arbeiten.

Meine Frage ist, auf welche Lebenszykluskomponente ich zugreifen soll, um meine Daten zu formatieren. Ich habe alle verfügbaren Methoden in den Dokumenten ausgeführt, um zu versuchen, mich zu console.log und zu sehen, wo ich bin, aber sie kehren alle leer zurück. Der einzige Ort, an dem ich die Requisiten tatsächlich im Rendering finde.

Meine Erklärung ist schlecht ich weiß aber jede Hilfe würde geschätzt werden.

-E

Answer 1

componentWillReceiveProps Lifecycle-Methode sollte einen Trick. Du kannst eine Requisite erhalten, die ankommend ist und sie dort formatieren. Danach können Sie formatierte Daten im Komponentenstatus festlegen und in Ihrer Rendermethode wie dieser verwenden.

componentWillReceiveProps(nextProps) { 
    this.setState({ 
    formattedBirthdate: nextProps.child.birthdate 
    }); 
} 

Die zweite Option wird dasselbe in Ihrem Konstruktor tun.

Danach können Sie ausgeben können Ihre formattedBirthdate in machen, wie folgt aus:

this.state.formattedBirthdate && <div>{this.state.formattedBirthdate}</div>