為什么等待 InvokeAsync(StateHasChanged()); 或 StateHasChanged() 不更改任何內容或在 Blazor 中重新渲染？

Question

我想在刪除或創建新產品時刷新表格組件。 我嘗試調用await InvokeAsync(StateHasChanged()); 或StateHasChanged()

但是表格組件沒有刷新它的數據，我必須手動點擊刷新按鈕才能看到變化

    public async Task HandleValidSubmit()
    {
        ReceivedProduct = new MyBlazorApp.Models.Product();
        using (var httpClient = new HttpClient())
        {
            StringContent content = new StringContent(JsonConvert.SerializeObject(ProductData), Encoding.UTF8, "application/json");

            using (var response = await httpClient.PostAsync("https://localhost:7104/api/Products", content))
            {
                string apiResponse = await response.Content.ReadAsStringAsync();
                ReceivedProduct = JsonConvert.DeserializeObject<MyBlazorApp.Models.Product>(apiResponse);
            }
        }
        FormSubmitMessage = "Product Created";

        await InvokeAsync(StateHasChanged);
    }

    protected async Task Delete(int Id)
    {
        await client.DeleteAsync("api/products/" + Id);
        FormSubmitMessage = "Product with ID: " + Id + " is deleted.";
        
        await InvokeAsync(StateHasChanged);
    }

Answer 1

在您調用 StaeHasChanged() 的兩種情況下，它都是不必要的 - 它已經在您的事件處理程序之后被調用。

但是 Table 組件不會刷新它的數據，

您需要重新加載數據。 大致：

protected override async Task OnInitializedAsync()
{
    await LoadTable();
} 

....

protected async Task Delete(int Id)
{
    await client.DeleteAsync("api/products/" + Id);
    FormSubmitMessage = "Product with ID: " + Id + " is deleted.";
    
    //await InvokeAsync(StateHasChanged);
    await LoadTable();
}