ReactJS - Wie initialisiere ich den Zustand von Requisiten richtig, der durch das Abrufen von Daten gefüllt wird?

8

Hier ist meine Bearbeitungskomponente:

%Vor%

Ich muss den Status von Requisiten wie folgt auffüllen:

%Vor%

Die Container -Komponente erhält onEdited und entity Requisiten von redux store. Die Eltern von Container verarbeiten Daten und onEdited (was wird nur ausgelöst, wenn der Benutzer Enter ) dispatch an den Server sendet.

Mein Problem ist, wie value Requisiten richtig initialisiert werden? Denn wenn ich:

%Vor%

Ich habe einen leeren Status, weil das Abrufen von Daten nicht abgeschlossen ist, wenn componentDidMount namens. Und wenn ich verwende:

%Vor%

Ich habe diese Warnung bekommen:

%Vor%

Also, wie mache ich das richtig?

    
Mas Bagol 07.08.2016, 14:33
quelle

2 Antworten

2

Das empfehle ich:

  • Sie könnten getInitialState von EditField verwenden, um den value -Zustand von der value -Stütze aufzufüllen. Dies wird jedoch nicht funktionieren, da getInitialState nur einmal aufgerufen wird, damit nachfolgende Renderings den Status nicht aktualisieren. Außerdem ist dies ein Anti-Pattern .
  • Sie sollten die EditField -Komponente kontrollieren. Übergeben Sie immer den aktuellen value als Prop und übergeben Sie den Status überhaupt nicht mehr. Wenn Sie möchten, dass eine Bibliothek Ihnen hilft, den Eingabestatus mit Redux zu verknüpfen, sehen Sie sich bitte Redux-Form .
  • Das onEdited -Ereignis, das du erstellt hast, zumindest so wie du es gemacht hast, spielt nicht gut mit kontrollierten Eingaben. Also, was du machen willst, ist ein onChange -Ereignis, das immer mit dem neuen ausgelöst wird Wert, so ändert sich der Redux-Zustand immer. Sie können ein anderes Ereignis auslösen, wenn der Benutzer die Eingabe eingibt (z. B. onEnterPressed ), damit Sie den Server aufrufen und die Entitätswerte aktualisieren können. Nochmal. Redux-Form kann hier helfen.
  • Anscheinend können entity.firstName und entity.lastName nur die Werte enthalten, die der Benutzer bestätigt hat (Enter drücken), keine temporären Werte. Wenn dies der Fall ist, versuchen Sie, den Status des Formulars vom Status der Entität zu trennen. Der Status des Formulars kann über Redux-Form gesteuert werden. Wenn der Benutzer auf Enter klickt, können Sie eine Aktion auslösen, die den Server aufruft und den Status der Entität aktualisiert. Sie können sogar einen "Ladezustand" haben, so dass Ihr Formular beim Aufruf des Servers deaktiviert ist.
André Pena 07.08.2016, 14:59
quelle
2

Da Container einen Redux-Speicher abonniert, schlage ich vor, die statusfreie EditField-Komponente zu erstellen. Hier ist mein Ansatz:

%Vor%

Eine Live-Demo: Ссылка

Container sendet entweder firstName, lastName oder den Standardstatus ...

    
Ilan Hasanov 07.08.2016 15:42
quelle

Tags und Links