Was soll ich tun, wenn React Daten hat, diese aber nicht rendern kann?

React hat Daten, kann aber die Lösung nicht rendern: 1. Rufen Sie im Konstruktor die getXXX-Methode auf. 2. Legen Sie setState in der getXXX-Methode fest. 3. Wenn die getXXX-Anfrage die Antwort vom Server empfängt und setState ausgeführt wird Seitenrendering erneut auslösen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was soll ich tun, wenn React Daten hat, diese aber nicht rendern kann?

react ruft Hintergrunddaten ab und rendert die Seite, ohne

Problembeschreibung:

• Gewünschtes Ergebnis: in der Komponente eines <code>react anzuzeigen Holen Sie sich die Hintergrunddaten und zeigen Sie sie an. Die Seite wird angezeigt, wenn sie zum ersten Mal gerendert wird. Ein Versuch: Definieren Sie eine getXXX-Methode außerhalb der Komponente und verwenden Sie axios Fordern Sie das Hintergrundergebnis an, rufen Sie diese Methode im Konstruktor von <code>Component auf und weisen Sie das Ergebnis dieser Methode dem Attribut state zu. react 的 Component 获取后台的数据并显示，页面第一次渲染时就显示

• 进行的尝试：在组件外定义了一个 getXXX 方法，使用 axios 请求后台的结果，在 Component 的构造方法里调用该方法，将该方法的结果赋值给 state 属性里

• bug结果： 后台数据接收到了请求，并正确返回结果，但是页面却没有渲染，使用 console 输出 GetXXX 的结果，结果是正确的

• bug排查：已确定后台收到请求并返回正确结果，前端也输出正确结果，也就说明是页面渲染先于获取到数据，但是react组件的加载顺序是先构造方法，再去调用render。所以只可能是异步的问题

• 分析: axios是一个异步请求，构造方法中调用这个方法，但是没有立刻获取到结果，所以 state 赋值的是一个 结果的成员变量，结果肯定是空，所以渲染的页面也无数据的

• 进行的尝试： 在render方法里使用axios请求，获取到结果后使用setState方法将结果赋值给state。结果运行报错，因为会造成死循环，因为 setState 会更新页面，即调用render方法，在 render 方法里调用setState会造成死循环

• 正确处理方：在构造方法里，调用getXXX方法，在getXXX方法里设置setState,这样页面会先进行渲染（数据结果为空），当getXXX的请求收到服务器的响应后，执行setState时，会重新触发页面渲染。因为请求响应的时间与服务器处理有关，当响应时间很短时，前端就看不见数据为空的结果，后台响应时间较长的情况，可以加一个 Antd 的加载组件 Spin

Fehlerergebnis: Hintergrund Datenempfang Die Anfrage wurde empfangen und das Ergebnis wurde korrekt zurückgegeben, aber die Seite wurde nicht gerendert. Verwenden Sie console, um das Ergebnis von GetXXX auszugeben

Fehlerbehebung: Die Hintergrundsammlung wurde ermittelt. Die Anforderung wird gestellt und das richtige Ergebnis zurückgegeben, und das Frontend gibt auch das richtige Ergebnis aus, was bedeutet, dass die Seite gerendert wird, bevor die Daten abgerufen werden, aber die Ladereihenfolge des react besteht darin, zuerst die Methode zu erstellen und dann render aufzurufen. Es kann sich also nur um ein asynchrones Problem handeln

Analyse: axios ist eine asynchrone Anfrage. Diese Methode wird in der Konstruktionsmethode aufgerufen, aber das Ergebnis wird nicht sofort erhalten, also state ist eine Mitgliedsvariable des Ergebnisses und das Ergebnis muss leer sein, damit die gerenderte Seite keine Daten enthält <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-22a2fefd3b.css" rel="stylesheet"> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-4566211012.css" rel="stylesheet">🎜🎜 Versuchen Sie: Verwenden Sie die <code>axios-Anfrage im render-Methode: Nachdem Sie das Ergebnis erhalten haben, verwenden Sie die Methode setState, um das Ergebnis state zuzuweisen. Infolgedessen wird beim Ausführen ein Fehler gemeldet, da dies zu einer Endlosschleife führt, da setState die Seite aktualisiert, dh die Methode render aufruft und aufruft in der <code>render-Methode führt zu einer Endlosschleife🎜🎜🎜🎜Die richtige Vorgehensweise: Rufen Sie in der Konstruktionsmethode den getXXXauf >-Methode und legen Sie setStategetXXX-Methode /code> fest, sodass die Seite zuerst gerendert wird (das Datenergebnis ist leer, wenn die Anforderung von getXXX empfängt die Antwort vom Server und wenn <code>setState ausgeführt wird, wird das Rendern der Seite erneut ausgelöst. Da die Antwortzeit der Anforderung mit der Serververarbeitung zusammenhängt, sieht das Frontend bei sehr kurzer Antwortzeit das Ergebnis leerer Daten nicht. Wenn die Antwortzeit im Hintergrund lang ist, können Sie einen Antdhinzufügen > Komponente wird geladenSpin, die Eingabeaufforderung wird geladen🎜🎜🎜🎜🎜Empfohlenes Lernen: „🎜Video-Tutorial reagieren🎜“🎜🎜🎜

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn React Daten hat, diese aber nicht rendern kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!