Ein Objekt verbindet benannte Eigenschaften mit Werten. Ein Array hält eine geordnete Liste. Zusammen beschreiben sie beispielsweise Hausakten mit Einträgen. React vergleicht später Zustandswerte. Deshalb ist es hilfreich, bei einer Änderung ein neues Objekt oder Array zu erzeugen, statt den vorhandenen Wert versteckt zu verändern.
01Eigenschaften lesen
entry.title liest die Eigenschaft title. Geschweifte Klammern mit Name-Wert-Paaren erzeugen ein Objekt. Eine ID identifiziert einen Eintrag unabhängig von seinem möglicherweise geänderten Titel.
const entry = { id: 'e1', title: 'Roof', costCents: 12990 };
const updated = { ...entry, title: 'Roof repair' };
const entries = [entry];
const next = entries.map((item) => item.id === updated.id ? updated : item);
console.log(entry.title);
console.log(next[0].title);
Starten / prüfen
node objects.mjs02Eine neue Version erzeugen
...entry kopiert die obersten Eigenschaften in ein neues Objekt. Die folgende title-Eigenschaft ersetzt nur diesen Wert. Die Kopie ist flach. Verschachtelte Objekte müssen bei einer Änderung ebenfalls bewusst kopiert werden.
03Eine Liste transformieren
map erzeugt aus jedem Element ein Ergebnis und liefert ein neues Array. Wir ersetzen nur den Eintrag mit passender ID. filter wäre die passende Methode, um Einträge zu entfernen. Beide verändern das ursprüngliche Array nicht.
Altes Objekt: Roof. Neues Objekt: Roof repair.
Deine Übung
Erzeuge aus next ein Array ohne den Eintrag e1.
Lösung mit Erklärung anzeigen
const remaining = next.filter((item) => item.id !== "e1") ergibt ein leeres Array. next enthält weiterhin den aktualisierten Eintrag. Das Ergebnis muss später bewusst als neuer Zustand verwendet werden.
Projektbezug und Quellen
Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.