React: Einstellungsstatus und Standardeingabe von Prop.

Question

Ich erstelle eine App, mit der Benutzer Assessments erstellen können (die andere Benutzer ausführen können). Im Moment arbeite ich an einer "Edit" -Seite, auf der ein Benutzer ein Formular lädt, das mit den relevanten Daten gefüllt ist - aber er kann diese Werte dann ändern.

Allerdings habe ich Probleme mit zwei Dingen (die ich vermute, sind verwandt). Erstens: Die Eingabefelder zeigen keinen Standardwert an, der vom Komponentenstatus abgeleitet ist.

Zweitens: Wenn ich die Eingabefelder direkt aus den Stützen setze, kann ich die Werte nicht mehr ändern.

Die Komponenten erhalten eine Prop, die block_data genannt wird, die ein Dict ist, das Schlüssel/Wert-Paare von Strings enthält.

Ich versuche, laden Sie es in den Zustand zu überführen, wie so

constructor(props) { 
    super(props); 

    this.state = { 
     block: this.props.block_data, 
     question_list: [], 
     question_options: ['BO', 'SC', 'SR', 'NO'], 
     block_list: [], 
    }; 
    (..) 
} 

Dies ist jedoch nicht funktioniert. Wenn ich die Chrome-React-Erweiterung einchecke, ist der Status nicht gesetzt.

Die Eingabefelder sind alle sehr ähnlich zu dem Beispiel, das ich unten eingefügt habe. Hier habe ich seinen Wert von den Requisiten festgelegt. In diesem Fall zeigt es die korrekten Anfangsdaten an. Aber ich kann es nicht bearbeiten.

<input 
    onChange={e => this.changeIsANaturalPartOfLife(e)} 
    value={this.props.block_data.title} 
    name="title" 
    /> 

Unten ist die Funktion 'bei Änderung'. Wenn ich das chrome react Tool überprüfe, kann ich sehen, dass nur der erste Buchstabe des Status aktualisiert wird, wenn ich mit der Eingabe anfange. Das Eingabefeld zeigt keine Änderungen.

changeIsANaturalPartOfLife(e, optional) { 

    const target = e.target; 
    const name = target.name; 
    const value = target.value; 
    console.log(value); 
    this.setState({ block: {[name]: value }}); 

} 

Ich bin wirklich ratlos, was zu tun ist. Was ich hier versuche, scheint einfach genug zu sein, aber ich bin nicht in der Lage, über dieses fehlerhafte Stadium hinauszugehen. Hat jemand eine Idee was ich falsch mache?

Answer 1

Wie Sie im Kommentar erwähnt: "Die Daten werden von einem DjangoRestAPI geladen".

Lösung von erstem Problem:

Sie benötigen componentwillreceiveprops Lifecycle-Methode verwenden, um den Zustand mit neuen Requisiten Werten zu aktualisieren (nach erfolgreich abgerufen vom Server) andernfalls Zustand der Kinder Komponente wird immer die Anfangsdaten von Eltern haben Komponente.

Wie pro DOC:

componentWillReceiveProps() ist, bevor ein Bauteil montiert aufgerufen neue Stützen aufnimmt. Wenn Sie den Status als Antwort auf Prop-Änderungen aktualisieren müssen (z. B. um ihn zurückzusetzen), können Sie this.props und nextProps vergleichen und Zustandsübergänge unter Verwendung von this.setState() in diese Methode durchführen.

Verwenden Sie diese Methode:

componentwillreceiveprops(nextProps) { 
    // compare nextProps.block_data and this.state.block if not equal 
    this.setState({ 
     block: nextProps.block_data 
    }) 
} 

Lösung von zweiten Problem:

Wenn Sie direkt die Requisiten verwenden, anstatt in dem Zustand zu speichern, dann müssen Sie den Wert in Mutter aktualisieren Komponente während OnChange, weil Sie this.props.value verwenden und this.state.value aktualisieren, und damit props.value wird immer gleich sein und es wird Ihnen nicht erlauben, etwas einzugeben.