使用来自 JSInterop 的数据更新 C# 中的对象而不是重新呈现

Question

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

为简单起见[=17=] :

@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

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

     StateHasChanged();
 }

应该可以，但可能需要 InvokeAsync(StateHasChanged);。

Answer 2

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

使用来自 JSInterop 的数据更新 C# 中的对象而不是重新呈现

Updating object in C# with data that came from JSInterop not re-rendering

blazor

blazor-jsinterop