Der setState Callback in React

1. Warum ist das Callback-Argument notwendig?
2. Wann verwendet man setState() Callback?

Auf den ersten Blick scheint die Methode .setState() von React-Komponenten einfach genug zu sein. Es aktualisiert den vorhandenen Status, um die Änderungen im Argument widerzuspiegeln. Viele wissen jedoch nicht, dass die Methode .setState() auch ein weiteres optionales Argument akzeptiert. Dieses Argument ist eine Callback-Funktion, die direkt nach der Statusaktualisierung ausgeführt wird.

Um zuverlässigeren Code zu schreiben, müssen Sie verstehen, was die Callback-Funktion .setState() macht und wie Sie sie verwenden können.

Warum ist das Callback-Argument notwendig?

Die meisten React-Entwickler wissen nicht, dass die Methode .setState() asynchron ist. Das Update erfolgt nicht sofort. Wenn Sie versuchen, den aktualisierten Inhalt von state direkt nach einem setState()-Aufruf zu lesen, haben Sie möglicherweise keinen Erfolg oder lesen die falschen Daten.

Um dieses Problem zu lösen, verwendet die Methode setState() ein weiteres optionales Argument - eine Callback-Funktion. Die in der Callback-Funktion angegebenen Aktionen werden erst ausgeführt, nachdem der Status aktualisiert wurde.

Wann verwendet man setState() Callback?

Wie oben erwähnt, ist der Aufruf von setState asynchron. Es aktualisiert das Zustandsobjekt nicht sofort. Wenn Sie eine Überprüfung oder eine andere Aktion basierend auf dem neuesten Update durchführen möchten, ist die Verwendung des Callbacks setState() eine gute Praxis. Dies ist jedoch nicht die einzige Möglichkeit, solche Operationen durchzuführen. Wir diskutieren die Alternativen in späteren Abschnitten.

Der Callback setState() ist für diese Art von Aktionen nützlich: Aufrufe der API, Überprüfung des Inhalts von state, um bedingt einen Fehler auszulösen, und andere Operationen, die direkt nach der Aktualisierung des state ausgeführt werden müssen . Der Callback setState() wird auch häufig zur Validierung verwendet.

Wenn wir zum Beispiel den <input> verwenden möchten, um den Zustand zu aktualisieren, können wir die Callback-Funktion verwenden, um den aktualisierten Wert mit absoluter Sicherheit zu lesen. Ohne Rückruf könnten wir die veralteten, älteren Versionen des Zustands überprüfen.

Codebeispiel:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  render() {
    return (
    <div>
    	<h1>Hello World</h1>
   		<input type="text" 
         onChange={(e) => this.setState({text: e.target.value}, 
         () => console.log(this.state.text))}></input>
    </div>
    )
  }
}

Callback-Funktion vs render()

Skeptiker könnten fragen, warum ich den Rückruf setState() benötige, wenn ich auf den aktualisierten state im Rumpf der Methode render() zugreifen kann?

Der Unterschied besteht darin, dass die Methode render() jedes Mal ausgeführt wird, wenn der state aktualisiert wird, während ein setState()-Callback nur ausgeführt wird, nachdem der spezifische Wert im state aktualisiert wurde.

.setState() in einer async-Funktion

Manchmal kann die Methode .setState() in asynchronen Funktionen aufgerufen werden. In diesem Fall wird der Status nicht sofort aktualisiert.

Wenn Sie den Wert der state-Eigenschaft mit dem Schlüsselwort this lesen, erhalten Sie einen alten Wert. Andererseits wird die Callback-Funktion aufgerufen, sobald die async-Aufgabe erledigt ist.

Alternative

React-Dokumente empfehlen Entwicklern, stattdessen die Lifecycle-Methode componentDidUpdate() zu verwenden, die nur für Klassenkomponenten verfügbar ist.

Bei funktionalen Komponenten kann useEffect() effektiv alle Lifecycle-Hooks ersetzen, inklusive componentDidUpdate(). Sie müssen nur das Abhängigkeitsarray anpassen.

Wenn Ihr Status beispielsweise eine Eigenschaft age hat und Sie ihren Wert überprüfen möchten, sobald der Status aktualisiert wurde, würde der Hook useEffect() wie folgt aussehen:

useEffect(()=>console.log(`doing something with ${this.state.age}`), [age])