Que dois-je faire si React contient des données mais ne peut pas les restituer ?-Questions et réponses frontales-php.cn

Que dois-je faire si React contient des données mais ne peut pas les restituer ?

藏色散人

Libérer： 2023-01-04 09:58:02

original

2378 Les gens l'ont consulté

React a des données mais ne peut pas restituer la solution : 1. Dans le constructeur, appelez la méthode getXXX ; 2. Définissez setState dans la méthode getXXX 3. Lorsque la requête getXXX reçoit la réponse du serveur, lorsque setState est exécuté, redéclencher le rendu de la page.

Que dois-je faire si React contient des données mais ne peut pas les restituer ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Que dois-je faire si React possède des données mais ne peut pas les restituer ?

react obtient les données d'arrière-plan et restitue la page sans afficher

Description du problème :

Résultat souhaité : dans le composant d'un <code>react Récupérez les données d'arrière-plan et affichez-les. La page sera affichée lors du premier rendu. Une tentative : Définir une méthode getXXX en dehors du composant et utiliser axios<.> Demander le résultat en arrière-plan, appeler cette méthode dans le constructeur de <code>Component, et affecter le résultat de cette méthode à l'attribut state 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

bug result: Background réception des données La demande a été reçue et le résultat a été renvoyé correctement, mais la page n'a pas été rendue. Utilisez console pour afficher le résultat de GetXXX. Le résultat est correct

. Dépannage de bug : la collecte en arrière-plan a été déterminée. La demande est effectuée et le résultat correct est renvoyé, et le front-end génère également le résultat correct, ce qui signifie que la page est rendue avant que les données ne soient obtenues, mais l'ordre de chargement du react consiste à construire d'abord la méthode, puis à appeler render . Il ne peut donc s'agir que d'un problème asynchrone

🎜Analyse : axios est une requête asynchrone. Cette méthode est appelée dans la méthode de construction, mais le résultat n'est pas obtenu immédiatement, donc

state<.> est attribué est une variable membre du résultat, et le résultat doit être vide, donc la page rendue n'a aucune donnée 🎜🎜🎜🎜 Essayez : utilisez la requête <code>axios

dans le . render , après avoir obtenu le résultat, utilisez la méthode setState pour attribuer le résultat à state. Par conséquent, une erreur est signalée lors de l'exécution, car elle provoquera une boucle infinie, car setState mettra à jour la page, c'est-à-dire appellera la méthode render et appellera dans la méthode <code>render. setState provoquera une boucle infinie🎜🎜🎜🎜La bonne façon de la gérer : dans la méthode de construction, appelez getXXX et définissez setStategetXXX /code>, de sorte que la page soit rendue en premier (le résultat des données est vide lorsque la demande de getXXX reçoit la réponse du serveur, et lorsque <code>setState est exécuté, la page sera redéclenchée. Étant donné que le temps de réponse de la demande est lié au traitement du serveur, lorsque le temps de réponse est court, le front-end ne verra pas le résultat des données vides. Si le temps de réponse en arrière-plan est long, vous pouvez ajouter un Antd. chargement du composantSpin, l'invite se charge🎜🎜🎜🎜🎜Apprentissage recommandé : "🎜tutoriel vidéo React🎜"🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!