Blazor分页后ImageCard复选框状态同步问题及优化咨询

场景描述 #

• 已实现ImagesContainer组件用于展示分页图片列表，内部包含多个ImageCard子组件，图片数据从数据库服务获取
• 用户切换分页时，调用服务获取对应页码和页大小的图片列表；因页面加载动画等标记逻辑，必须依赖await InvokeAsync(StateHasChanged)更新页面
• 为ImageCard添加复选框实现图片选择功能：通过ManagerService管理选中图片ID的List<int>及增删清方法，复选框状态变化时调用这些方法，同时触发OnSelectedImagesChanged事件控制交互按钮的显隐

现有问题与临时处理 #

分页更新ImagesContainer后，旧的ImageCard会残留选中状态，与ManagerService中的选中列表不一致。为此通过ManagerService触发OnRefreshImages事件，让ImageCard根据当前图片ID是否在选中列表中更新状态，LoadImages伪代码如下：

private async Task LoadImages()
{
    // 调用数据库服务获取当前页的Image实体

    // 更新页面显示新的图片列表
    await InvokeAsync(StateHasChanged); 

    // 触发事件刷新ImagesContainer的ImageCard子组件，设置选中状态
    ManagerService.RefreshImages();
}

问题在于StateHasChanged调用后，页面并未立即完成重渲染，此时触发事件操作的还是旧的ImageCard组件。添加await Task.Delay(1000)能解决问题，但硬编码延迟体验差且不优雅。

疑问 #

是否应该在Image模型中添加IsSelected属性，在数据库调用后初始化该属性，从而无需OnRefreshImages事件，让ImageCard在StateHasChanged时自动更新选中状态？

补充信息 #

• Gallery页面包含ImagesContainer的标记逻辑，_projects通过OnAfterRenderAsync初始化后调用LoadImages
• StateHasChanged主要用于解决初始化后页面未刷新、一直显示加载动画的问题
• ManagerService.RefreshImages仅用于触发事件：public void RefreshImages() => OnRefreshImages?.Invoke();

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