Ändern des Zustands

Abgeschlossen

Da der Zustand in React unveränderlich ist, müssen Sie zum Ändern des Werts eines zustandsbehafteten Objekts das Objekt durch ein neues ersetzen. Dadurch vermeiden Sie eine Menge Probleme, bei denen Objekte möglicherweise einen ungültigen Zustand aufweisen, weil sie bearbeitet werden.

Kopieren von Objekten

Primitive Typen, z. B. boolesche Werte oder Zahlen, sind im Gegensatz zu Verweisobjekten wertbasierte Objekte. Daher wird das gesamte Objekt bei jeder Änderung automatisch ersetzt.

Zeichenfolgen weisen ein ähnliches Verhalten auf, da sie unveränderlich sind. Sie können eine Zeichenfolge ändern, indem Sie sie durch einen neuen Wert ersetzen.

let message = 'Hello, ';
message = message + 'world!';

Wenn Sie mit einem Objekt arbeiten, müssen Sie eine neue Instanz dieses Objekts erstellen, um die Unveränderlichkeit sicherzustellen. Die gängigste Syntax zum Erstellen einer Kopie eines Objekts ist die Spread-Syntax, die auch als Spread-Operator bezeichnet wird.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = { ...message };

Ändern einzelner Eigenschaften

In der Regel muss nur eine Teilmenge der Eigenschaften eines Objekts geändert werden. Das Erstellen einer Kopie und Ändern jeder Eigenschaft würde sehr mühsam werden.

Beachten Sie in der obigen Syntax, dass ein neues JSON-Objekt mithilfe der geschweiften Klammern ({ }) erstellt wird. Der Spread-Operator kann dazu verwendet werden, eine anfängliche Version eines neuen Objekts zu erstellen. Dies ermöglicht es Ihnen, geänderte Werte für bestimmte Eigenschaften festzulegen. Wenn Sie über einen neuen Wert für color verfügen, den Text aber beibehalten möchten, können Sie beispielsweise den folgenden Code verwenden.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = {
    ...message,
    color: 'green'
};

Hier behält text den ursprünglichen Wert bei. Der Wert color wird in „green“ (grün) geändert.

// new object
{
    text: 'Hello, world',
    color: 'green'
}