Comment actualiser une page principale de rasoir à partir de sous-composants après un appel API ?

Actualisation de la page principale du rasoir à partir des sous-composants après un appel API

Ce guide aborde le défi de la mise à jour d'une page principale Razor à partir de ses sous-composants suite à un appel API, en se concentrant spécifiquement sur le maintien d'un état de chargement lors de la récupération des données. La solution exploite un service étendu et la méthode InvokeAsync(StateHasChanged) de Blazor.

Problème : La recherche initiale affiche une icône de chargement, mais les applications de filtrage suivantes ne parviennent pas à la déclencher.

Solution :Cette solution utilise un service limité pour gérer l'état de l'application et coordonner les mises à jour entre les composants.

Étapes de mise en œuvre :

1. Service étendu (AppState) : Créez un service étendu (par exemple, AppState) pour savoir si les données de l'API ont été reçues. Ce service contiendra un indicateur booléen, tel que API_Data_Received.

2. Filtrage de sous-composants (FilterRazorComponent) : Lorsqu'un filtre est appliqué au sein d'un sous-composant :

   • Réglez AppState.API_Data_Received sur false, signalant la nécessité d'une actualisation des données.
   • Accédez à la page SearchResults.razor en transmettant tous les paramètres de filtre nécessaires. Pensez à utiliser les paramètres de navigation pour transmettre efficacement les données.

3. Page principale (SearchResults.razor) :

   • Injectez le service AppState.
   • Dans OnInitializedAsync(), vérifiez de manière asynchrone AppState.API_Data_Received.
   • Si AppState.API_Data_Received est false, affichez un indicateur de chargement et lancez l'appel API.
   • Une fois l'appel API réussi, définissez AppState.API_Data_Received sur true et appelez InvokeAsync(StateHasChanged) pour actualiser l'interface utilisateur, en supprimant l'indicateur de chargement et en affichant les résultats mis à jour.

Cette approche garantit que la page SearchResults.razor principale reflète systématiquement l'état de chargement et met à jour son contenu après chaque appel d'API déclenché par des interactions de sous-composants. L'utilisation d'un service étendu fournit un moyen propre et efficace de gérer l'état de l'application et de déclencher des mises à jour de l'interface utilisateur.

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!