Blazor页面数据更新但UI未刷新问题求助（BlazorHero模板）

接触Blazor仅1个月，基于BlazorHero模板开发SPA应用时遇到以下问题：页面数据已通过GetDataAsync更新，但UI未自动刷新；手动点击重载按钮或编程调用按钮的点击事件却能正常刷新UI。

相关代码 #

后端逻辑代码 #

private MudButton _reloadButton;

protected override async Task OnInitializedAsync()
{
    //...
    await GetDataAsync(); // 此处调用能正常刷新UI
    //...
}

private async Task GetDataAsync()
{
    _sourceId2RecordCounts = (await LibAdaHub.AdaPPM.DataSources.GetSourceId2MeasureRecordCounts(Config.AdaHubUrl)).Value!;
    _dataRecords = (await LibAdaHub.AdaPPM.DataRecords.GetAll(Config.AdaHubUrl, _sourceId)).Value!;
    // 调试确认此处数据已更新，但UI未刷新
}

private async void CreateOrEdit(string sourceId, string recordId)
{
    var dialog = _dialogService.Show<CreateDialog>(Localizer["DataSources"],
        new DialogParameters
        {
            {nameof(CreateDialog.SourceId), sourceId},
            {nameof(CreateDialog.RecordId), recordId},
            {nameof(CreateDialog.Model), string.IsNullOrEmpty(_sourceId) 
                ? null : _dataRecords.FirstOrDefault(i => i.SourceId == _sourceId)},
            {nameof(CreateDialog.ModelType), typeof(DataRecord)}
        },
        new DialogOptions
        {
            CloseButton = true,
            FullScreen = true,
            DisableBackdropClick = true
        });
    var result = await dialog.Result;
    if (result.Cancelled)
    {
        return;
    }

    // await GetDataAsync(); // 数据更新但UI不刷新
    await _reloadButton.OnClick.InvokeAsync(null); // 此方式能正常刷新UI
}

前端页面代码 #

<MudTable Hover="true" Elevation="25" Items="_dataRecords" Dense="true" Bordered="false" Striped="true" 
          Filter="new Func<DataRecord, bool>(Search)">
 ...
                <MudButton DisableElevation Variant="Variant.Filled" Color="Color.Primary" 
                           OnClick="async () => await CreateOrEdit(_sourceId, _recordId)"
                           StartIcon="@Icons.Material.Filled.AddComment" IconColor="Color.Surface">
                    @Localizer["Create"]
                </MudButton>
                 <MudButton @ref="_reloadButton" DisableElevation Variant="Variant.Filled" OnClick="GetDataAsync" 
                       StartIcon="@Icons.Material.Filled.Refresh" IconColor="Color.Surface" 
                       Color="Color.Secondary" Style="margin-left: 5px">@Localizer["Reload"]</MudButton>
</MudTable>

解决思路 #

1. 修正异步方法返回类型
   CreateOrEdit方法使用了async void，这在Blazor中会导致方法脱离组件的异步生命周期调度，无法触发UI更新机制。将其改为async Task：

   private async Task CreateOrEdit(string sourceId, string recordId)
   

   页面中调用逻辑已使用await，无需额外修改。

2. 手动触发状态变更
   若修改异步方法后仍无法刷新UI，可在GetDataAsync方法末尾手动调用StateHasChanged()，强制组件检测状态变更并刷新UI：

   private async Task GetDataAsync()
   {
       _sourceId2RecordCounts = (await LibAdaHub.AdaPPM.DataSources.GetSourceId2MeasureRecordCounts(Config.AdaHubUrl)).Value!;
       _dataRecords = (await LibAdaHub.AdaPPM.DataRecords.GetAll(Config.AdaHubUrl, _sourceId)).Value!;
       StateHasChanged();
   }
   

3. 优化集合绑定特性
   若后续需要修改集合内元素而非重新赋值，可将_dataRecords从普通List<DataRecord>改为ObservableCollection<DataRecord>，它会自动通知UI集合内部的元素变更。

4. 简化调用逻辑
   修复上述问题后，即可直接使用await GetDataAsync()替代按钮点击事件调用，代码逻辑更清晰合理。

内容的提问来源于stack exchange，提问作者cheny