Blazor工厂布局应用15秒自动刷新功能失效求助

问题分析 #

你的代码存在几个关键问题导致自动刷新功能失效：

• OnAfterRenderAsync阻塞：在firstRender分支里的while循环会长期阻塞组件的生命周期方法，Blazor无法正常处理后续的渲染或组件生命周期事件，定时器逻辑无法按预期执行。
• 整页刷新的逻辑冲突：如果reloadPage是调用location.reload()，页面刷新会直接销毁当前组件实例，刷新后重新初始化组件，导致之前的定时器被中断，且console.log可能来不及输出就触发了页面刷新。
• 未正确实现IDisposable：组件未实现IDisposable接口，框架无法自动调用Dispose方法，令牌和定时器资源无法被正确清理。
• currentTime未动态更新：currentTime仅在初始化时赋值，每次触发定时器时不会更新为当前时间。

修复方案 #

方案1：整页刷新（不推荐，SPA场景下体验较差） #

修改代码，将定时器逻辑放到后台任务，同时实现IDisposable接口：

@implements IDisposable
@inject IJSRuntime JS

<!-- 你的组件内容 -->

@code {
    public List<Station> Stations = new List<Station>();
    private List<Connection> Connections = new List<Connection>();
    private List<CurvedConnection> CurvedConnections = new List<CurvedConnection>();
    private List<string> LineElements = new List<string>();
    private PeriodicTimer? _periodicTimer;
    private CancellationTokenSource _cts = new CancellationTokenSource();
    private DateTime _currentTime;

    protected override void OnInitialized()
    {
        SetupInitialStations();
        UpdateConnections();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _periodicTimer = new PeriodicTimer(TimeSpan.FromSeconds(15));
            // 启动后台任务执行定时器逻辑，避免阻塞生命周期方法
            _ = RunPeriodicRefreshAsync();
        }
    }

    private async Task RunPeriodicRefreshAsync()
    {
        try
        {
            while (await _periodicTimer!.WaitForNextTickAsync(_cts.Token))
            {
                _currentTime = DateTime.Now;
                await JS.InvokeVoidAsync("console.log", "Periodic work done", _currentTime);
                // 延迟一点再刷新，确保日志能输出
                await Task.Delay(100);
                await JS.InvokeVoidAsync("reloadPage");
            }
        }
        catch (OperationCanceledException)
        {
            // 取消时的处理，无需额外操作
        }
    }

    public void Dispose()
    {
        _cts.Cancel();
        _periodicTimer?.Dispose();
        _cts.Dispose();
    }

    // 你的SetupInitialStations和UpdateConnections方法
    private void SetupInitialStations() => /* 实现逻辑 */;
    private void UpdateConnections() => /* 实现逻辑 */;
}

同时确保你的reloadPage JS函数正确定义：

window.reloadPage = () => {
    location.reload();
};

方案2：局部刷新数据（推荐，符合Blazor SPA特性） #

不需要整页刷新，只更新数据并通知组件重新渲染，体验更流畅：

@implements IDisposable
@inject IJSRuntime JS

<!-- 你的组件内容，比如展示Stations的UI -->

@code {
    public List<Station> Stations = new List<Station>();
    private List<Connection> Connections = new List<Connection>();
    private List<CurvedConnection> CurvedConnections = new List<CurvedConnection>();
    private List<string> LineElements = new List<string>();
    private PeriodicTimer? _periodicTimer;
    private CancellationTokenSource _cts = new CancellationTokenSource();
    private DateTime _currentTime;

    protected override void OnInitialized()
    {
        LoadData();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _periodicTimer = new PeriodicTimer(TimeSpan.FromSeconds(15));
            _ = RunPeriodicDataRefreshAsync();
        }
    }

    private async Task RunPeriodicDataRefreshAsync()
    {
        try
        {
            while (await _periodicTimer!.WaitForNextTickAsync(_cts.Token))
            {
                _currentTime = DateTime.Now;
                await LoadDataAsync(); // 异步加载最新数据
                await JS.InvokeVoidAsync("console.log", "Data refreshed at", _currentTime);
                StateHasChanged(); // 通知组件重新渲染
            }
        }
        catch (OperationCanceledException)
        {
            // 取消时的处理
        }
    }

    // 同步或异步加载数据的方法
    private void LoadData()
    {
        SetupInitialStations();
        UpdateConnections();
    }

    private async Task LoadDataAsync()
    {
        // 替换为你的实际数据加载逻辑，比如调用API获取最新的工厂布局数据
        await Task.Delay(100); // 模拟异步操作
        SetupInitialStations();
        UpdateConnections();
    }

    private void SetupInitialStations() => /* 实现逻辑 */;
    private void UpdateConnections() => /* 实现逻辑 */;

    public void Dispose()
    {
        _cts.Cancel();
        _periodicTimer?.Dispose();
        _cts.Dispose();
    }
}

关键修复点说明 #

• 将定时器逻辑移到独立的后台任务RunPeriodicRefreshAsync，避免阻塞OnAfterRenderAsync方法。
• 实现IDisposable接口，确保组件销毁时正确清理定时器和取消令牌。
• 局部刷新方案使用StateHasChanged()通知组件重新渲染，避免整页刷新的性能损耗和体验问题。
• 更新_currentTime为当前触发时间，确保日志输出准确。

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