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

Question

我有一个简单的组件，比如说它列出了一些来自IndexedDB的客户，我可以很好地检索数据，甚至可以看到对象在放置一些断点时获得值，但组件在获得数据更新后不会重新渲染。

为简便起见，客户剃刀：

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