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:
Ich habe einen leeren Status, weil das Abrufen von Daten nicht abgeschlossen ist, wenn componentDidMount
namens. Und wenn ich verwende:
Ich habe diese Warnung bekommen:
%Vor%Also, wie mache ich das richtig?
Das empfehle ich:
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 . 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 . 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. 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. 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 ...
Tags und Links javascript reactjs