Wie ändert man den Zustand von Komponenten in React…

Die Zustandsänderung in React erfolgt entweder durch die Methode setState für Klassenkomponenten oder mit dem Hook useState für funktionale Komponenten.

Klassenkomponenten:

// React importieren
import React, { Component } from 'react';

// Klassenkomponente erstellen
class MyComponent extends Component {
  // Zustand initialisieren
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Methode zur Zustandsänderung
  incrementCount = () => {
    // setState verwenden
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Zähler: {this.state.count}</p>
        <button onClick={this.incrementCount}>Erhöhen</button>
      </div>
    );
  }
}

// Komponente exportieren
export default MyComponent;

setState ist asynchron.
setState verbindet den neuen Zustand mit dem aktuellen (shallow merge).
setState kann eine Funktion annehmen, die den neuen Zustand basierend auf dem vorherigen zurückgibt:

// Methode zur Zustandsänderung mit Funktion
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Funktionale Komponenten (mit useState):

// React und useState importieren
import React, { useState } from 'react';

// Funktionale Komponente erstellen
function MyFunctionComponent() {
  // Zustand mit useState initialisieren
  const [count, setCount] = useState(0); // [aktueller Zustand, Aktualisierungsfunktion]

  // Funktion zur Zustandsänderung
  const incrementCount = () => {
    // Aktualisierungsfunktion verwenden
    setCount(count + 1);
  };

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={incrementCount}>Erhöhen</button>
    </div>
  );
}

// Komponente exportieren
export default MyFunctionComponent;

useState gibt ein Array mit zwei Elementen zurück: dem aktuellen Zustand und der Funktion zu dessen Aktualisierung.
Die von useState zurückgegebene Aktualisierungsfunktion ersetzt den aktuellen Zustand, anstatt ihn zu verbinden.
Es ist möglich, eine Funktion an die Aktualisierungsfunktion zu übergeben, wenn der neue Zustand vom vorherigen abhängt:

// Funktion zur Zustandsänderung mit Funktion
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Wichtige Punkte bei der Zustandsänderung:

Ändern Sie den Zustand nicht direkt: Ändern Sie niemals den Wert der state-Eigenschaft direkt (z.B. this.state.count = 5 oder count = 5). React erkennt diese Änderung nicht und der Komponent wird nicht neu gerendert.
Änderung von Objekten und Arrays: Beim Ändern von Objekten oder Arrays im Zustand erstellen Sie immer neue Kopien. React vergleicht die Referenzen der Objekte/Arrays, und wenn sich die Referenz nicht ändert, geht React davon aus, dass die Daten sich nicht geändert haben, und rendert nicht neu.

// Änderung eines Objekts in einer Klassenkomponente
this.setState(prevState => ({
  user: {
    ...prevState.user, // Kopieren der alten Eigenschaften
    name: 'Neuer Name' // Aktualisieren der benötigten Eigenschaft
  }
}));

// Änderung eines Arrays in einer funktionalen Komponente
setItems(prevItems => [...prevItems, 'Neues Element']); // Neues Element hinzufügen

Asynchronität von setState: Wenn Sie eine Aktion nach der Aktualisierung des Zustands und dem erneuten Rendern des Komponenten ausführen möchten, verwenden Sie das zweite Argument von setState (eine Callback-Funktion) oder den Hook useEffect in funktionalen Komponenten.

// Callback in setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Zustand aktualisiert!');
});

// useEffect zur Reaktion auf Zustandsänderungen
useEffect(() => {
  console.log('Der Zustand count hat sich geändert:', count);
}, [count]); // Abhängigkeit: Hook wird bei Änderung von count ausgeführt

Vergleich der Methoden:

Eigenschaft	Klassenkomponente (`setState`)	Funktionale Komponente (`useState`)
Syntax	Methode `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Zusammenführung/Ersetzung	Führt den neuen Zustand mit dem aktuellen zusammen (shallow merge)	Ersetzt den aktuellen Zustand durch den neuen
Asynchron	Asynchron	Die Aktualisierungsfunktion ist asynchron bei Aufruf aus Event-Handlern, aber synchron im React-Renderzyklus
Abhängigkeit vom vorherigen Zustand	Funktion an `setState` übergeben: `this.setState(prevState => ({...}))`	Funktion an die Aktualisierungsfunktion übergeben: `setState(prev => ({...}))`

Wie ändert man den Zustand von Komponenten in React richtig?