Blazor Server父组件用StateHasChanged刷新子组件列表失效如何解决

你当前子组件暴露的Refresh方法仅调用了StateHasChanged()触发视图重绘，但没有重新拉取数据库的最新数据，子组件内存中存储的model列表仍然是初始化阶段加载的旧数据，因此视图不会展示新增内容。你刷新整个页面时会重新初始化子组件，自动执行LoadMetaDataList拉取最新数据，所以才能看到新增内容。

方案1：调整子组件Refresh方法逻辑（最适配你现有代码） #

修改子组件的Refresh方法，先重新加载数据库数据再触发视图刷新，修改后的代码如下：

@code {
    List<MetaDataViewModel> model= new List<MetaDataViewModel>();    
    
    protected override async Task OnInitializedAsync()
    {
        await LoadMetaDataList();
    }
    public async Task LoadMetaDataList()
    {        
        model = dbContextService.fetchFromDb();
    }    
    // 修改为异步方法，先加载最新数据再刷新视图
    public async Task Refresh()
    {
        await LoadMetaDataList();
        StateHasChanged();
    }
}

父组件调用Refresh方法时需要添加await关键字，确保数据加载完成后再执行后续逻辑：

// 对话框关闭且未取消时的调用逻辑
await listMetaDataRef.Refresh();

方案2：通过参数传递触发刷新（更符合Blazor数据流规范） #

如果不希望通过@ref直接调用子组件方法，也可以通过参数变更触发子组件刷新：

子组件新增参数与参数变更检测逻辑 #

@code {
    [Parameter]
    public bool ShouldRefresh { get; set; }

    List<MetaDataViewModel> model= new List<MetaDataViewModel>();    
    
    protected override async Task OnInitializedAsync()
    {
        await LoadMetaDataList();
    }
    public async Task LoadMetaDataList()
    {        
        model = dbContextService.fetchFromDb();
    }    

    protected override async Task OnParametersSetAsync()
    {
        if (ShouldRefresh)
        {
            await LoadMetaDataList();
            // 重置参数状态，避免重复触发刷新
            ShouldRefresh = false;
            StateHasChanged();
        }
    }
}

父组件使用方式 #

父组件新增控制刷新的字段，对话框关闭后修改字段值触发子组件刷新：

<!-- 父组件中使用子组件的位置，绑定ShouldRefresh参数 -->
<ListMetaData @bind-ShouldRefresh="triggerChildRefresh" />

@code {
    private bool triggerChildRefresh = false;

    // 对话框关闭且未取消时的逻辑
    private async Task OnDialogClosed()
    {
        // 省略新增数据存入数据库的逻辑
        triggerChildRefresh = true;
        // 触发父组件状态更新，同步参数到子组件
        StateHasChanged();
    }
}

• 如果使用EF Core作为数据访问组件，建议在查询数据时添加AsNoTracking()，避免上下文跟踪导致查询不到最新数据的问题
• 所有异步数据加载方法调用时都需要添加await关键字，避免数据加载未完成就触发视图刷新

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