Blazor Server中SignalR删除元素后UI不自动更新问题排查

核心原因：对象引用不匹配导致删除操作无效 #

删除客户端时UI不更新的直接原因是：当SignalR Hub发送DeleteClientUI事件时，传递的client是经过序列化/反序列化后的新实例，和本地clients列表中存储的原有客户端对象不是同一个引用。而List<T>.Remove(T item)方法对于引用类型，默认通过引用地址匹配对象，所以无法找到要删除的项，列表没有实际修改，UI也就不会自动更新。

反观新增操作，List.Add只需将新对象加入列表，不受引用是否相同的影响，因此能正常生效。

解决办法 #

办法1：通过ID查找并删除对象（最直接）

修改Blazor组件中DeleteClientUI的处理逻辑，根据客户端ID定位目标对象后删除：

hubConnection.On<ClientModel>("DeleteClientUI", client =>
{
    var target = clients.FirstOrDefault(c => c.Id == client.Id);
    if (target != null)
    {
        clients.Remove(target);
        InvokeAsync(StateHasChanged);
    }
});

办法2：重写ClientModel的Equals和GetHashCode方法

让ClientModel基于ID进行对象相等性判断，这样List.Remove就能正确匹配对象：

public class ClientModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    // 其他属性...

    public override bool Equals(object obj)
    {
        return obj is ClientModel other && Id == other.Id;
    }

    public override int GetHashCode()
    {
        return Id.GetHashCode();
    }
}

额外优化：修正异步方法的错误使用 #

你的LoadData方法用了async void，这在Blazor中可能导致数据加载不完整或生命周期问题，建议改成async Task并在OnInitializedAsync中await调用：

private async Task LoadData()
{
    string connectionString = Configuration.GetConnectionString("test_db");

    await using (SqlConnection connection = new SqlConnection(connectionString))
    {
        await connection.Open();
        string query = "select * from clients";

        using (SqlCommand command = new SqlCommand(query, connection))
        {
            using (SqlDataReader reader = await command.ExecuteReaderAsync())
            {
                while (await reader.ReadAsync())
                {
                    clients.Add(new ClientModel()
                    {
                        Id = reader.GetInt32(0),
                        Name = reader.GetString(1),
                        Email = reader.GetString(2),
                        Phone = reader.GetString(3),
                        Address = reader.GetString(4),
                        CreatedOn = reader.GetDateTime(5),
                    });
                }
            }
        }
    };
}

protected override async Task OnInitializedAsync()
{
    await LoadData(); // 使用await等待数据加载完成

    hubConnection = new HubConnectionBuilder()
        .WithUrl(Navigation.ToAbsoluteUri("/clientsHub"))
        .Build();

    // 其余Hub事件注册和启动代码...
}

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