Objekte im State

Werte, die zusammengehören, können sich einen State teilen, als Objekt. Eine Ticketbestellung hat eine Art und eine Anzahl:

const [ticket, setTicket] = useState({ art: "Wochenende", anzahl: 1 });

Die Seite liest es wie jedes Objekt: {ticket.anzahl} × {ticket.art} zeigt 1 × Wochenende. Für das Ändern gilt dieselbe Regel wie bei Arrays: Ändere nicht das Objekt im State (ticket.anzahl = 2 zeigt nichts Neues), erzeuge ein neues. Spread kopiert das Objekt, und eine Eigenschaft, die danach geschrieben wird, ersetzt die der Kopie:

const neuesTicket = { ...ticket, anzahl: 2 };

neuesTicket hat alles, was ticket hatte, auch art, und für anzahl den Wert 2. Ohne den Spread würde setTicket({ anzahl: 2 }) die art verlieren: Ein Setter ersetzt den gesamten State, er führt das neue Objekt nicht mit dem alten zusammen.

Wie bei den neuen Arrays gehört ein neues Objekt, das aus dem alten gebildet wird, in eine Updater-Funktion. Hier zählt sie 1 zur Anzahl dazu. Eine Besonderheit: Gibt eine Pfeilfunktion ein Objekt zurück, braucht das Objekt Klammern:

function nochEins() {
    setTicket((ticket) => ({ ...ticket, anzahl: ticket.anzahl + 1 }));
}

Ohne sie wären die geschweiften Klammern der Rumpf der Funktion, wie in (ticket) => { return …; }, und ...ticket in einem Rumpf ist ein Fehler: Die rote Meldung unter der Vorschau lautet Unexpected token, expected ",", und die App läuft nicht. Die Klammern machen aus den geschweiften Klammern ein Objekt, das die Pfeilfunktion zurückgibt.

Zwei State-Variablen, art und anzahl, würden auch funktionieren. Ein Objekt ist praktisch, wenn die Werte eine Sache beschreiben und sich zusammen ändern, wie eine Ticketbestellung.