Why does await InvokeAsync(StateHasChanged()); or StateHasChanged() not change anything or re-render in Blazor?

Question

I want to refresh the Table component when Deleting or Creating a new Product. I try to call await InvokeAsync(StateHasChanged()); or StateHasChanged()

But the Table component doesn't refresh its data, I have to manually hit the refresh button to see the changes

    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

In both cases where you call StaeHasChanged() it is unnecessary - it will already be called after your eventhandler.

But the Table component doesn't refresh its data,

You need to reload your data. Roughly:

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();
}