Snippet

Unveränderliches Aktualisieren von Objektfeldern im State

In JavaScript und React sind Objekte Referenzdatentypen. Um den Zustand korrekt zu aktualisieren, ohne das Originalobjekt direkt zu mutieren, erstellt man eine flache Kopie mit dem Spread-Operator (...) und überschreibt die gewünschte Eigenschaft.

snippet.js

javascript

import { useState } from 'react';
 
export function UserProfile() {
  const [user, setUser] = useState({ name: 'Alex', age: 25 });
 
  const updateAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };
 
  return <button onClick={updateAge}>{user.name} is {user.age}</button>;
}

react

Erklärung

const [user, setUser] = useState({ name: 'Alex', age: 25 });

Initialisiert den Zustand mit einem Objekt-Datentyp, der Benutzerdetails enthält.

setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));

Nutzt den vorherigen Zustand, um ein neues Objekt mit erhöhtem Alter zurückzugeben und Unveränderlichkeit zu wahren.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Unveränderliches Aktualisieren von Objektfeldern im State

Verwandt