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

L'actualisation d'une page principale Razor à partir de sous-composants dans Blazor après un appel d'API nécessite une approche de gestion d'état. Le mécanisme de détection des modifications intégré de Blazor ne mettra pas automatiquement à jour le composant parent à moins que ses propriétés de données ne changent. Voici comment implémenter une solution robuste à l'aide d'un modèle d'état/notification :

Pour y parvenir, nous utiliserons un service pour gérer l'état de l'application, en l'injectant à la fois dans la page principale et dans ses sous-composants. Les sous-composants déclencheront des notifications dans ce service après les appels d'API, provoquant des mises à jour de l'interface utilisateur.

1. Créer un service de gestion de l'État :

Ce service contiendra les données et un mécanisme pour informer les abonnés des changements. Nous utiliserons un EventCallback à cet effet.

<code class="language-csharp">using Microsoft.AspNetCore.Components;

public class StateService
{
    public event Action StateChanged;

    // Your application state data
    public string DataFromAPI { get; set; } = "";

    public void NotifyStateChanged()
    {
        StateChanged?.Invoke();
    }
}</code>

2. Injecter le service dans les composants :

Injectez le StateService à la fois dans votre page principale Razor et dans les sous-composants qui effectuent des appels API.

<code class="language-csharp">@inject StateService StateService // In both the main page and sub-components</code>

3. Appel API et mise à jour de l'état dans le sous-composant :

Dans votre sous-composant, après un appel API réussi, mettez à jour les données du StateService et notifiez le changement.

<code class="language-csharp">@code {
    protected override async Task OnInitializedAsync()
    {
        string apiData = await FetchDataFromAPI(); // Your API call
        StateService.DataFromAPI = apiData;
        StateService.NotifyStateChanged();
    }

    // ... your API call method ...
    private async Task<string> FetchDataFromAPI()
    {
        // Your API call logic here
        return await Task.FromResult("Data from API");
    }
}</code>

4. Mettre à jour la page principale du rasoir :

Dans votre page principale Razor, affichez les données du StateService. Blazor restituera automatiquement cette section lorsque StateService.DataFromAPI change car il s'agit d'une propriété d'un composant.

<code class="language-csharp">@page "/"
@inject StateService StateService

<h1>Main Page</h1>
<p>@StateService.DataFromAPI</p>

<MySubComponent /></code>

Considérations importantes :

• Gestion des erreurs : Incluez une gestion appropriée des erreurs dans vos appels d'API au sein des sous-composants.
• État complexe : Pour les applications plus complexes, pensez à utiliser une bibliothèque de gestion d'état plus sophistiquée comme Fluxor ou Redux.
• Opérations asynchrones : Assurez-vous que vos appels d'API sont traités de manière asynchrone à l'aide de async et await pour éviter de bloquer le thread de l'interface utilisateur.

Ce modèle garantit que les modifications apportées à n'importe quel sous-composant déclencheront une mise à jour dans la page principale en mettant à jour l'état partagé et en informant le système du changement. La page principale s'affiche automatiquement à nouveau car elle est liée aux données du service. Cela évite les appels manuels à StateHasChanged dans le composant parent, ce qui est généralement déconseillé pour ce type de mise à jour.

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!