javascript - Questions sur l'utilisation de fetch pour demander des données en réaction

Question

Lorsque j'ai utilisé fetch pour améliorer les données d'interface du projet React aujourd'hui, j'ai rencontré un problème difficile.
La logique métier est la suivante : déterminer d'abord l'identité de l'utilisateur, puis lui montrer l'interface correspondante.
Mais la récupération obtient les données de manière asynchrone et le résultat apparaît. La page est d'abord rendue, puis les données sont demandées (la demande de données est plus lente que le rendu de la page), puis l'état d'affichage de la page est modifié par l'état.
Cela apparaît. La page affiche d'abord une interface, puis après 1 à 2 secondes, le statut change et l'interface change à nouveau. L'expérience utilisateur est très mauvaise. y-a-t'il une solution?
Il est préférable d'accepter d'abord les données, puis de compléter le jugement, puis de restituer l'interface.

Answer 1

C'est en fait très simple. Vous faites un opérateur ternaire dans le retour du rendu. Déterminez si les données ont été obtenues.

<p>
{this.state.data==null?<p></p>:<YourTemplate/>}
</p>

Une autre idée est d'écrire fetch dans le rendu et de mettre le modèle de retour dans fetch puis dans le rappel, afin que vous puissiez obtenir les données puis les restituer. Je ne l'ai pas encore testé, mais cela devrait être possible.
Si vous pensez que ma réponse a résolu votre problème, veuillez cliquer sur
采纳答案
Si vous avez des questions, veuillez les poser dans la zone de commentaires.

Answer 2

Obtenez une boîte de dialogue d'invite de chargement,
Attendez que la demande de données soit terminée avant de rendre la page

Answer 3

Stockez d'abord le statut d'identité de l'utilisateur dans localStorage et récupérez-le depuis localStorage pour la première fois