如何在 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 主頁中，顯示來自 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 和 await 非同步處理 API 調用，以防止阻塞 UI 執行緒。

此模式可確保任何子元件中的變更都會透過更新共用狀態並通知系統變更來觸發主頁中的更新。 主頁會自動重新呈現，因為它綁定到服務的資料。 這可以避免在父元件中手動呼叫 StateHasChanged，這種類型的更新通常不鼓勵這樣做。

以上是如何在 Blazor 中呼叫 API 後從子元件刷新 Razor 主頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！