Обновление объекта на C# данными, полученными из JSInterop, без повторной визуализации

Question

У меня есть простой компонент, скажем, он перечисляет некоторых клиентов, пришедших из IndexedDB, я могу отлично извлекать данные, даже видеть, что объект получает значение, если ставит несколько точек останова, но компонент не выполняет повторный рендеринг после получения обновления данных.

Для простоты Customers.razor:

@inject IJSRuntime js
@foreach(var item in Data)
{
    <h5>@item.Name</h5>
}
@code{
    protected List<CustomerModel> Data { get; set; }

    protected override  async Task OnAfterRenderAsync(bool firstRender)
    {
        Data = await js.InvokeAsync<List<CustomerModel>>("Database.get", "customers");
    }
}

Запуск Blazor на.NET Core 3.1, что-то мне здесь не хватает?

Answer 1

@inject IJSRuntime js

@* Verify that the data is not null and the list contains items, otherwise
   an exception is thrown *@ 
@if( Data != null && Data.Any())
{
    @foreach(var item in Data)
    {
        <h5>@item.Name</h5>
    }
}


@code{
    protected List<CustomerModel> Data { get; set; }

    protected override  async Task OnAfterRenderAsync(bool firstRender)
    {
        // Call only once 
        if( firstRender )
        {
             Data = await js.InvokeAsync<List<CustomerModel>>("Database.get", 
                                                             "customers");
             InvokeAsync(() => { StateHasChanged();});
        }
    }
}

Answer 2

 protected override  async Task OnAfterRenderAsync(bool firstRender)
 {
     Data = await js.InvokeAsync<List<CustomerModel>>("Database.get", "customers");

     StateHasChanged();
 }

Должно работать, но может быть InvokeAsync(StateHasChanged); потребуется.