Blazor移除List<>项后界面未正确更新问题求助

核心原因 #

Blazor 默认使用循环索引作为子组件的隐式键，删除列表中间项时，组件实例会被错误复用——尽管数据源已正确更新，但组件与数据的对应关系未同步，导致视图显示错乱。

具体修复步骤 #

1. 给子组件绑定唯一@key
   这是最关键的修复操作，让Blazor能精准识别每个子组件对应的模型实例。遍历生成子组件时，将@key绑定到DogModel的唯一属性（比如Id）：

@foreach (var dog in Dogs)
{
    <DogComponent Dog="dog" @key="dog.Id" />
}

设置后，删除任意项时Blazor会直接销毁对应@key的组件，而非复用其他组件实例，视图就能正确同步数据源变化。

2. 确保在UI线程触发状态更新
   如果用Rx订阅处理删除事件，回调可能运行在后台线程，直接调用StateHasChanged无法触发UI更新。需用InvokeAsync将操作切换到Blazor的UI同步上下文：

_removeDogSubscription = DogCommunicationService.RemoveDogAgent.Subscribe(dog =>
{
    InvokeAsync(() => DeleteDog(dog));         
});

private void DeleteDog(DogModel dog)
{
    // 用唯一ID匹配移除，避免引用不相等导致的移除失败
    var targetDog = Dogs.FirstOrDefault(d => d.Id == dog.Id);
    if (targetDog != null)
    {
        Dogs.Remove(targetDog);
    }
    StateHasChanged();
}

3. 可选：改用支持变更通知的集合
   如果后续有频繁增删操作，可将List<DogModel>替换为ObservableCollection<DogModel>，并绑定其CollectionChanged事件自动触发StateHasChanged，不过这属于优化项，核心修复还是@key的设置。

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