Blazor Server重新加载Model后调用StateHasChanged页面未刷新怎么办

核心问题原因 #

• 你的EditValue方法使用了错误的异步返回值async void，还多写了一个async关键字：Blazor无法跟踪async void方法的异步执行生命周期，导致StateHasChanged()触发时机不在渲染同步上下文内，不会触发UI重绘。
• 循环渲染列表项未指定@key：Blazor的DOM diff算法会默认复用现有列表DOM节点，编辑同位置的现有项时会被判定为无变化，不更新UI。
• 数据层可能存在缓存：如果你的SettingsService使用了EF Core等ORM，默认的实体跟踪机制可能会返回内存中缓存的旧实体，而非数据库最新数据。

修复步骤 #

1. 修正异步方法声明 #

将EditValue的返回值从async void改为async Task，Blazor会自动跟踪Task类型异步方法的执行完成状态，方法结束后会自动触发UI重绘，不需要手动调用StateHasChanged()。
修正后的代码：

async Task EditValue()
{
    ValueEntry valModel = new ValueEntry();
    valModel.prop1= ...;
    valModel.prop2= ...;
  
    bool entryStatus = await SettingsService.UpdateValue(DbEntryId,valModel);
    
    if(entryStatus) 
    {
      // 重新加载模型
      model = await SettingsService.GetDbEntryById(DbEntryId);
    }
}

2. 给列表循环添加@key标识 #

在循环渲染列表项的li标签上添加@key，指定唯一值作为diff的判定依据，比如ValueEntry的唯一Id：

<ul>
@foreach (var item in model.Values)
{
  <li @key="item.Id">
    @item 
  </li>
}
</ul>

3. 排查数据层缓存问题 #

如果使用EF Core查询，在查询时添加AsNoTracking()禁用实体跟踪，确保每次都拉取数据库最新数据：

// SettingsService中的GetDbEntryById方法修改示例
public async Task<EntityModelData> GetDbEntryById(int id)
{
    return await _context.EntityModelDatas
        .AsNoTracking() // 禁用跟踪，拉取最新数据
        .Include(x=>x.Values)
        .FirstOrDefaultAsync(x=>x.Id == id);
}

4. 强制触发渲染的兜底方案 #

如果以上修改后仍有问题，可以通过先清空模型引用再赋值的方式强制触发重绘：

if(entryStatus) 
{
    model = null;
    await Task.Yield(); // 让出线程先处理一次空状态的渲染
    model = await SettingsService.GetDbEntryById(DbEntryId);
}

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