Blazor实时更新问题：无法实现无需手动刷新的自动UI刷新

问题根源 #

你的代码中存在几个导致UI无法自动刷新的关键问题：

• [StreamRendering] 属性会干扰组件后续的动态更新逻辑，该属性仅适用于初始加载时的流式渲染场景；
• 传统 Timer 的回调线程脱离Blazor UI上下文，即使使用 InvokeAsync 也可能存在上下文同步问题；
• OnInitializedAsync 中调用 UpdateWeatherForecast 未使用 await，可能导致初始状态异常；
• 冗余的 InvokeAsync 嵌套调用，反而可能引发上下文混乱。

修复步骤 #

1. 移除 [StreamRendering] 属性
   该属性与实时更新需求冲突，直接删除即可。

2. 替换为 PeriodicTimer
   使用.NET 6+提供的异步定时器 PeriodicTimer，它原生支持异步操作，完美适配Blazor的异步上下文，无需额外处理线程切换。

3. 修正异步调用逻辑
   在组件初始化和定时器循环中正确使用 await，确保状态更新和UI刷新在正确的上下文执行。

4. 简化 StateHasChanged 调用
   由于 UpdateWeatherForecast 会在UI上下文执行，直接调用 StateHasChanged 即可，无需额外嵌套 InvokeAsync。

修改后的完整代码 #

@page "/weather"
@implements IAsyncDisposable

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;
    private PeriodicTimer? _timer;

    protected override async Task OnInitializedAsync()
    {
        // 初始化数据并等待完成
        await UpdateWeatherForecast();

        // 设置异步定时器，每3秒执行一次
        _timer = new PeriodicTimer(TimeSpan.FromSeconds(3));
        _ = RunTimerLoop();
    }

    // 异步定时器循环逻辑
    private async Task RunTimerLoop()
    {
        if (_timer == null) return;
        
        while (await _timer.WaitForNextTickAsync())
        {
            Console.WriteLine("Timer elapsed, updating weather data...");
            await UpdateWeatherForecast();
        }
    }

    // 更新天气数据并触发UI刷新
    private async Task UpdateWeatherForecast()
    {
        Console.WriteLine("Updating weather forecast...");

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).ToArray();

        Console.WriteLine("Forecast data updated.");
        
        // 直接触发UI刷新，已在UI上下文
        StateHasChanged();
        
        await Task.Yield();
    }

    // 清理异步定时器
    public async ValueTask DisposeAsync()
    {
        if (_timer != null)
        {
            await _timer.DisposeAsync();
            Console.WriteLine("Timer disposed.");
        }
    }

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

关键修改说明 #

• 移除了 [StreamRendering] 属性，避免干扰动态更新；
• 用 PeriodicTimer 替代传统 Timer，异步逻辑更贴合Blazor环境；
• 新增 RunTimerLoop 方法处理定时器循环，全程异步执行；
• 简化 StateHasChanged 调用，确保在UI上下文执行；
• 修正 DisposeAsync 逻辑，适配异步定时器的清理需求。

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