Ich habe eine Todo-Liste und möchte den Status dieses Elements im Array auf "complete" setzen, wenn der Benutzer auf "complete" klickt.
Hier ist meine Aktion:
%Vor%Hier ist mein Reduzierer:
%Vor%Das Problem, das ich habe, ist, dass der neue Status nicht mehr den Text dieses todo-Elements auf dem ausgewählten Element hat und die ID nicht mehr vorhanden ist. Liegt das daran, dass ich den Zustand überschreibe und die vorherigen Eigenschaften ignoriere? Mein Objekt Onload sieht so aus:
%Vor%Wie Sie sehen, möchte ich nur den abgeschlossenen Wert auf "wahr" setzen.
Sie müssen Ihr Todos-Array so transformieren, dass das entsprechende Element aktualisiert wird. Array.map ist der einfachste Weg, dies zu tun:
%Vor%Es gibt Bibliotheken, die Ihnen bei dieser Art von Deep State Update helfen. Eine Liste solcher Bibliotheken finden Sie hier: Ссылка
Persönlich verwende ich ImmutableJS ( Ссылка ), das das Problem mit seinen Methoden updateIn und setIn löst (Die sind effizienter als normale Objekte und Arrays für große Objekte mit vielen Schlüsseln und für Arrays, aber langsamer für kleine Objekte).
Neuer Status hat nicht mehr den Text, der diesem todo-Objekt zugeordnet ist das gewählte Item und die ID sind nicht mehr da, ist das, weil ich es bin den Zustand überschreiben und die vorherigen Eigenschaften ignorieren?
Ja, weil Sie bei jedem Update ein neues Array mit nur einem Schlüssel completed zuweisen und dieses Array keine vorherigen Werte enthält. Also nach update array werden keine vorherigen Daten mehr haben. Deshalb sind Text und ID nach dem Update nicht vorhanden.
Lösungen:
1 - Verwenden Sie array.map um das richtige Element zu finden, dann aktualisieren Sie den Wert, wie folgt:
%Vor%2- Verwenden Sie array.findIndex , um das zu finden Index dieses bestimmten Objekts aktualisieren Sie das dann, wie folgt:
%Vor%Überprüfen Sie dieses Snippet, um eine bessere Vorstellung von dem Fehler zu bekommen, den Sie machen:
Eines der grundlegenden Designprinzipien in React ist "Nicht mutieren". Wenn Sie Daten in einem Array ändern möchten, müssen Sie ein neues Array mit den geänderten Werten erstellen.
Zum Beispiel habe ich eine Reihe von Ergebnissen im Zustand. Anfangs setze ich nur Werte für jeden Index in meinem Konstruktor auf 0.
%Vor%Später möchte ich einen Wert im Array aktualisieren. Aber ich ändere es nicht im Zustandsobjekt. Mit ES6 können wir den Spread-Operator verwenden. Die Array-Slice-Methode gibt ein neues Array zurück, das bestehende Array wird nicht geändert.
%Vor%Wenn ich ein Element im Array aktualisieren möchte, rufe ich updateArray auf und setze den Status auf einmal:
%Vor%Tags und Links javascript state reactjs redux reducers