Blazor定时查询数据库更新UI失败，调用StateHasChanged报错求解

问题根源 #

定时器的回调逻辑运行在后台线程，而Blazor的组件状态更新、UI渲染必须在Dispatcher关联的UI线程中执行。直接在后台线程调用StateHasChanged()会触发跨线程操作错误，也就是你遇到的System.InvalidOperationException。

解决方法 #

使用组件内置的InvokeAsync()方法，将状态更新和渲染触发的逻辑切换到UI线程执行。

代码示例 #

错误代码（会触发报错）

private Timer _statusTimer;

protected override void OnInitialized()
{
    // 每秒执行一次状态更新回调
    _statusTimer = new Timer(RefreshRequestStatus, null, 0, 1000);
}

private void RefreshRequestStatus(object state)
{
    // 从数据库拉取最新状态
    var updatedStatus = FetchLatestStatusFromDb();
    CurrentRequestStatus = updatedStatus;
    Console.WriteLine($"当前状态：{CurrentRequestStatus}");
    
    // 直接调用导致跨线程错误
    StateHasChanged();
}

修正后的代码

private Timer _statusTimer;

protected override void OnInitialized()
{
    _statusTimer = new Timer(RefreshRequestStatus, null, 0, 1000);
}

private async void RefreshRequestStatus(object state)
{
    // 从数据库拉取最新状态
    var updatedStatus = FetchLatestStatusFromDb();
    CurrentRequestStatus = updatedStatus;
    Console.WriteLine($"当前状态：{CurrentRequestStatus}");
    
    // 通过InvokeAsync切换到UI线程触发渲染
    await InvokeAsync(StateHasChanged);
}

// 组件销毁时释放定时器，避免内存泄漏
public void Dispose()
{
    _statusTimer?.Dispose();
}

额外说明 #

• InvokeAsync()负责将委托调度到Dispatcher线程，确保所有组件状态操作都在UI线程上执行，这是Blazor线程模型的核心要求。
• 如果你的数据库查询是异步方法（比如await FetchLatestStatusFromDbAsync()），直接在回调中使用异步逻辑即可，InvokeAsync()依然可以正常包裹StateHasChanged()调用。
• 务必实现IDisposable接口释放定时器，防止组件销毁后定时器持续运行导致内存泄漏。

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