javascript / intermediate
Snippet
State zurücksetzen über den Key-Prop
Wenn sich der 'key' einer Komponente ändert, behandelt React sie als völlig neue Komponente. Die alte wird unmounted und ihr interner State gelöscht. Dies ist ein eleganter Weg, Formulare oder Ansichten bei Datenwechseln zurückzusetzen.
snippet.js
1
<ProfileEditor key={selectedUserId} userId={selectedUserId} />
react
Erklärung
1
key={selectedUserId}
Durch die Bindung des Keys an die ID setzt React den gesamten internen State automatisch zurück, sobald sich die ID ändert.
2
userId={selectedUserId}
Standardmäßige Prop-Übergabe; der Key steuert den Lebenszyklus, während dies die Daten liefert.