{"id":2316,"date":"2022-02-18T19:11:58","date_gmt":"2022-02-18T18:11:58","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2316"},"modified":"2022-02-18T19:11:58","modified_gmt":"2022-02-18T18:11:58","slug":"react-setstate-wird-nicht-ausgefuehrt","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2316\/react-setstate-wird-nicht-ausgefuehrt\/","title":{"rendered":"React: setState wird nicht ausgef\u00fchrt?"},"content":{"rendered":"<p>setState wird nicht gleich gesetzt in Typescript und React-Anwendung?<\/p>\n<p><!--more--><\/p>\n<p>Heute hatte ich eine interessante Beobachtung in einer React-Anwendung. Ich wollte ein State-Objekt setzen und anschlie\u00dfend zur \u00dcberpr\u00fcfung den Wert ausgeben. Allerdings wurde der Wert scheinbar nicht gesetzt:<\/p>\n<pre>\r\nthis.setState( { currentDataItem: item });\r\nconsole.log(item);\r\n<\/pre>\n<p>Die Ausgabe brachte immer noch den alten Wert. Was war da los? Nun der &#8222;Fehler&#8220; ist, dass das Setzen des States nicht synchron, sondern asynchron ist. D.h. der State wird gesetzt, es dauert ein wenig, aber die Programmausf\u00fchrung geht weiter. <\/p>\n<p>Die L\u00f6sung ist ein Callback zu verwenden:<\/p>\n<pre>\r\nthis.setState( { currentId : id}, () => {\r\n    console.log(this.state.currentId);\r\n});\r\n<\/pre>\n<p>Dieser wird ausgel\u00f6st, sobald das Setzen des States abgeschlossen ist. Hier k\u00f6nnen dann auch abh\u00e4ndige States gesetzt werden.<\/p>","protected":false},"excerpt":{"rendered":"<p>setState wird nicht gleich gesetzt in Typescript und React-Anwendung?<\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[44,561,590],"class_list":["post-2316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-react","tag-typescript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2316"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2316\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/2260"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}