Blazor での API 呼び出し後にサブコンポーネントからメイン Razor ページを更新するにはどうすればよいですか?

API 呼び出し後に Blazor のサブコンポーネントからメイン Razor ページを更新するには、状態管理アプローチが必要です。 Blazor の組み込み変更検出メカニズムは、データ プロパティが変更されない限り、親コンポーネントを自動的に更新しません。 状態/通知パターンを使用して堅牢なソリューションを実装する方法は次のとおりです:

これを実現するには、サービスを使用してアプリケーションの状態を管理し、それをメイン ページとそのサブコンポーネントの両方に挿入します。 サブコンポーネントは、API 呼び出し後にこのサービスで通知をトリガーし、UI の更新を促します。

1.状態管理サービスを作成します:

このサービスはデータと変更を加入者に通知するメカニズムを保持します。 この目的のために EventCallback を使用します。

<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.サービスをコンポーネントに注入します:

StateService をメインの Razor ページと API 呼び出しを行うサブコンポーネントの両方に挿入します。

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

3.サブコンポーネントの API 呼び出しと状態更新:

サブコンポーネントでは、API 呼び出しが成功した後、StateService のデータを更新し、変更を通知します。

<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.メイン Razor ページを更新します:

Razor のメイン ページで、StateService からのデータを表示します。 StateService.DataFromAPI はコンポーネントのプロパティであるため、Blazor は

が変更されるとこのセクションを自動的に再レン​​ダリングします。

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

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

<MySubComponent /></code>

重要な考慮事項:

• エラー処理:
サブコンポーネント内の API 呼び出しに適切なエラー処理を含めます。
• 複雑な状態:
より複雑なアプリケーションの場合は、Fluxor や Redux などのより高度な状態管理ライブラリの使用を検討してください。
• 非同期操作:async UI スレッドのブロックを防ぐために、API 呼び出しが await と
を使用して非同期的に処理されるようにします。

StateHasChangedこのパターンでは、共有状態を更新し、システムに変更を通知することで、サブコンポーネントの変更がメイン ページの更新を確実にトリガーします。 メイン ページはサービスのデータにバインドされているため、自動的に再レン​​ダリングされます。 これにより、親コンポーネントでの

への手動呼び出しが回避されます。このタイプの更新では通常は推奨されません。

以上がBlazor での API 呼び出し後にサブコンポーネントからメイン Razor ページを更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。