使用来自 JSInterop 的数据更新 C# 中的对象，而不是重新渲染

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

在 .NET Core 3.1 上运行 Blazor，我这里有什么遗漏吗？

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);。