Blazor移除列表对象后未自动重新渲染的问题求助

问题核心原因：Blazor的组件自动渲染触发机制依赖引用类型的引用变更或值类型的数值变更。你用的List<T>是引用类型，调用Remove()只是修改列表内部元素，列表本身的引用没有改变，因此Blazor无法自动检测到状态变化，也就不会触发重新渲染。

以下是不需要手动调用StateHasChanged()的优化方案：

方案一：使用ObservableCollection #

ObservableCollection<T>会在集合添加、移除、替换元素时自动触发CollectionChanged事件，Blazor框架能监听该事件并自动触发组件重新渲染。

修改后的完整代码：

@page "/"
@using System.Collections.ObjectModel

<ul>
    @foreach (Item item in items)
    {
        <li @onclick="@(() => RemoveItem(item))">@item.Value</li>
    }
</ul>

@code {
    ObservableCollection<Item> items = new() { 
        new Item() { Value = 1 },
        new Item() { Value = 2 },
        new Item() { Value = 3 },
    };

    void RemoveItem(Item item)
    {
        items.Remove(item);
    }

    class Item
    {
        public int Value { get; set; }
    }
}

方案二：重新赋值列表引用 #

移除元素后，通过创建新的列表实例来改变原变量的引用，让Blazor检测到状态变更。

修改后的RemoveItem方法（原页面代码其余部分不变）：

void RemoveItem(Item item)
{
    items.Remove(item);
    // 重新赋值新的列表实例，触发状态检测
    items = new List<Item>(items);
    // 或者用LINQ筛选的方式直接生成新列表
    // items = items.Where(x => x != item).ToList();
}

这两种方案都能让Blazor自动触发UI更新，不需要手动调用StateHasChanged()，其中ObservableCollection<T>更适合频繁进行增删操作的场景，代码更简洁。

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