Lösung für das React-Programm „reine Funktionskomponente setState“ aktualisiert die Seitenaktualisierung nicht

Problembeschreibung:

const [textList, setTextList] = useState(ursprüngliches Array);
setTextList(neues Array);

Wenn beim Ändern des ursprünglichen Arrays das ursprüngliche Array ein tiefes Array (mehr als eine Ebene) ist, wird durch die Verwendung von setTextList zum Ändern keine Seitenaktualisierung ausgelöst.

Ursachenanalyse:

Dies beinhaltet das Wissen über veränderliche und unveränderliche Objekte. Wenn Sie in Vue und React ein veränderliches Objekt aktualisieren, kann dies dazu führen, dass die Ansicht aktualisiert wird. Dies liegt daran, dass Vue und React standardmäßig oberflächliche Listener sind und nur auf die erste Datenebene hören. Änderungen an den Daten der inneren Ebene werden nicht überwacht.

Lösung:

Meine Lösung besteht hier darin, zuerst eine vollständige Kopie des ursprünglichen Arrays zu erstellen, sie dem neuen Array zuzuweisen, dann das neue Array zu ändern und das geänderte neue Array zu übergeben, wodurch die Ansicht aktualisiert wird.

var lists = textList.concat();
Listen.splice(Index, 1);
setzeTextList(Listen);

Ergänzung: In React rendern useState-Updates keine Komponenten, wenn Hooks verwendet werden

Beim Verwenden von React und Schreiben von Komponenten wie der in der Abbildung gezeigten habe ich ein kritisches Problem festgestellt. Wenn ich mich dafür entscheide, sie mit Klasse zu schreiben, ist es einfach, das Rendering über die Komponente zu aktualisieren.
Als ich beschloss, meine Komponenten mithilfe funktionaler Komponenten-Hooks umzugestalten, stieß ich auf ein sehr schwieriges Problem. Als ich onChange verwendete, um den Wert der übergeordneten Komponente zu ändern, wurde der Wert geändert, aber die Komponente wurde nicht neu gerendert? ? ? ?
Ich war verwirrt und habe versucht, den Wert auf „leer“ zu setzen und ihn dann der Klassenkomponente zuzuweisen. Das ist mir nicht gelungen und ich habe versucht, den Lebenszyklus des Hooks durchzusehen. . . . ------Wenn das nicht klappt, versuchen Sie es mit Baidu. --- Bei mir ist das Problem dasselbe. . . Ich habe festgestellt, dass ich am Ende nur slice() hinzufügen musste.
Um das Problem zunächst zu lösen, habe ich den roten Kreis in der Abbildung in onChange(value.slice()) geändert.
-----So, dieses magische Problem wurde gelöst.

Nachdem das Problem nun gelöst ist, gehen wir zurück und sehen nach, was passiert ist. . .
Beim Betrachten des Dokuments fand ich einen Satz, dass die Daten im useState unveränderlich sein müssen (nicht zuweisbares Objekt).
Das heißt, der Status der Ass-Komponente empfiehlt ebenfalls die Verwendung unveränderlicher Daten, dies ist jedoch nicht zwingend erforderlich, da eine Aktualisierung ausgelöst wird, solange setState aufgerufen wird. Daher tritt dieses Problem in der Klassenkomponente nicht auf, bzw. durch eine Leeränderung und anschließende Wertzuweisung kann die Aktualisierung ausgelöst werden.
Wenn jedoch bei erneuter Verwendung von useState dasselbe Objekt an die Aktualisierungsfunktion übergeben wird, wird die Aktualisierung nicht ausgelöst.
Die Lösung besteht also darin, über slice() ein neues Objekt zurückzugeben, um den Wert zuzuweisen. Dies ist der Schlüssel zur Lösung des Problems. . . .

Oben finden Sie die detaillierte Lösung für das Problem, dass die SetState-Aktualisierungsseite der reinen React-Funktionskomponente nicht aktualisiert wird. Weitere Informationen dazu, dass die React-UseState-Seite nicht aktualisiert wird, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!