Tauchen Sie tief in das häufige Problem ein, dass `setState` in React-Funktionskomponenten auf null zurückgesetzt wird, und entdecken Sie effektive Lösungen wie die Verwendung von `useRef`.
---
Dieses Video basiert auf der Frage https://stackoverflow.com/q/62309979/ gestellt von dem Nutzer 'baldash' ( https://stackoverflow.com/u/6574669/ ) sowie auf der Antwort https://stackoverflow.com/a/62325231/ bereitgestellt von dem Nutzer 'baldash' ( https://stackoverflow.com/u/6574669/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge.
Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: React setState on array resets value to null right after call (Functional component)
Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l...
Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ).
Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com.
---
Verständnis von setState in React: Lösung des Null-Reset-Problems in Funktionskomponenten
Wenn Sie mit React arbeiten, insbesondere mit Funktionskomponenten, sind Sie vielleicht auf das rätselhafte Problem gestoßen, dass ein Aufruf von setState auf einem Array den Wert auf null zurücksetzt. Dieses Problem kann besonders störend sein, vor allem wenn Ihre Komponente auf die Aktualisierung von Werten für Funktionen wie Karten oder Formulare angewiesen ist. In diesem Blogbeitrag zerlegen wir dieses häufige Problem und erkunden eine Lösung, die Sie in Ihren Projekten umsetzen können.
Das Problem: Zustand setzt sich auf Null zurück
Beim Arbeiten mit React-Funktionskomponenten kann es passieren, dass ein Aufruf von setState auf einem Array nicht wie erwartet funktioniert. Der untenstehende Code zeigt ein häufiges Szenario, bei dem die Komponente dazu gedacht ist, Markierungen auf einer Karte zu setzen. Nach der Aktualisierung des Zustands setzt sich das markers-Array sofort auf [null, null] zurück. Dies kann sehr frustrierend sein, wenn Ihre Benutzeroberfläche auf diese Werte angewiesen ist.
Warum passiert das?
Der Kern des Problems liegt darin, wie auf den Zustand in verschiedenen Kontexten zugegriffen wird. Wenn Sie Ihren Zustand mit useState deklarieren, erwarten Sie ein bestimmtes Verhalten, aber bestimmte Interaktionen können zu unerwarteten Standardwerten führen:
Interaktion mit Kind-Komponenten: Das Problem tritt zunächst auf, wenn die Methoden departChanged und arrivalChanged, die für das Aktualisieren der markers zuständig sind, von Kind-Komponenten ausgelöst werden. Dadurch können die Methoden auf Standard-Zustandswerte anstelle der aktuellsten Zustandsupdates zugreifen.
Asynchronität des Zustands: Reacts setState ist asynchron. Wenn Sie den Zustand unmittelbar nach dem Aufruf protokollieren oder lesen, greifen Sie möglicherweise auf veraltete Werte zurück, da React das Update noch nicht verarbeitet hat.
Die Lösung: Verwendung von useRef
Nachdem das Problem identifiziert wurde, besteht eine einfache, aber effektive Umgehungslösung darin, den React-Hook useRef zu verwenden. Dieser Ansatz erlaubt es, Referenzen auf veränderbare Objekte zu halten, ohne erneute Renderings auszulösen. So können Sie die Werte über Renderzyklen hinweg behalten, ohne das gleiche Reset-Problem zu erleben.
So implementieren Sie useRef
Hier wird gezeigt, wie Sie den Code anpassen können, um useRef zu verwenden, um die Markierungen persistent zu speichern:
Importieren Sie useRef: Stellen Sie zunächst sicher, dass Sie useRef aus React importieren:
[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]
Definieren Sie eine Referenz für Markierungen: Anstelle des direkten Speicherns der Markierungen im Zustand, erstellen Sie eine Referenz:
[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]
Aktualisieren Sie den referenzierten Wert: Statt setMarkers aufzurufen, aktualisieren Sie den Wert der Referenz direkt in Ihren Funktionen departChanged und arrivalChanged:
[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]
Zugriff auf die Referenz: Wann immer Sie die Markierungen lesen müssen, greifen Sie einfach auf markersRef.current zu, anstatt auf den Zustandswert zu bauen.
Fazit
Probleme mit dem Zurücksetzen des Zustands in React können frustrierend sein, insbesondere beim Umgang mit Arrays in Funktionskomponenten. Durch die Änderung Ihrer Zustandsverwaltung mit Hilfe des Hooks useRef können Sie das Problem des Zugriffs auf veraltete oder Standardwerte effizient umgehen.
Wenn Sie in Ihren React-Anwendunge
Информация по комментариям в разработке