Blazor中StateHasChanged()结合SignalR无法更新UI问题排查

监听SignalR中的方法，希望在事件触发时更新UI，但目前数据已成功接收，UI却没有变化。

我的实现代码：

@foreach (var user in users)
{
    <MudItem xs="12" md="6">
            <MudCard>
                    <h3>@user.FirstName @user.LastName</h3>
            </MudCard>
    </MudItem>
}


@code {
 List<UserDto> users = new();

 HubConnection connection = new HubConnectionBuilder()
    .WithUrl("ws://localhost:6172/chat")
    .Build();

 protected override async Task OnInitializedAsync()
 {
    connection.On<UserDto>("UserJoined", async (user) =>
    {
        users.Add(user);
        await InvokeAsync(StateHasChanged);
    });

    await connection.StartAsync();
 }
}

当我尝试直接调用StateHasChanged()时，会抛出如下异常：

connection.On<UserDto>("UserJoined", async (user) =>
    {
        users.Add(user);
        StateHasChanged();
    });

异常信息：

System.InvalidOperationException: 'The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.'

解决方案 #

核心原因 #

SignalR的回调方法运行在非UI线程，而Blazor组件的状态更新和UI渲染必须在Dispatcher（UI线程）中执行。直接调用StateHasChanged()会因为线程上下文不匹配抛出异常，你之前用await InvokeAsync(StateHasChanged)的写法逻辑正确，但UI没更新可能有以下细节需要调整：

1. 让集合变更被Blazor自动感知
   List<T>无法自动通知Blazor集合内容变更，换成ObservableCollection<UserDto>可以解决这个问题，它会在元素添加/移除时自动触发变更通知：

   ObservableCollection<UserDto> users = new();
   

   配合await InvokeAsync(StateHasChanged)，UI更新会更可靠。

2. 确保线程安全
   SignalR回调可能在多线程环境下触发，添加元素时加锁避免集合操作冲突：

   connection.On<UserDto>("UserJoined", async (user) =>
   {
       lock (users)
       {
           users.Add(user);
       }
       await InvokeAsync(StateHasChanged);
   });
   

3. 验证SignalR连接状态
   确认connection.StartAsync()执行成功，添加错误处理排查连接问题：

   protected override async Task OnInitializedAsync()
   {
       try
       {
           connection.On<UserDto>("UserJoined", async (user) =>
           {
               users.Add(user);
               await InvokeAsync(StateHasChanged);
           });
   
           await connection.StartAsync();
       }
       catch (Exception ex)
       {
           Console.WriteLine($"SignalR连接失败: {ex.Message}");
       }
   }
   

总结：你最初用await InvokeAsync(StateHasChanged)的思路是正确的，换成ObservableCollection并保证线程安全后，UI就能正常更新了。

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