Blazor切换页面后StateHasChanged()异步场景失效问题咨询

问题分析 #

你遇到的核心问题是：未切换页面时，调用StateHasChanged()（或InvokeAsync(StateHasChanged)）能正常更新UI；但切换页面后，即便后台变量PushNotifications.notifications已正确添加新数据，UI也不再更新。根源主要有三点：

1. 普通集合无变更通知：List<string>不支持变更通知，Blazor无法自动感知集合内容变化，尤其是组件切换后重新激活时，无法绑定到集合的最新状态。
2. 异步方法使用async void：async void会导致上下文丢失、异常无法捕获，页面切换后原组件上下文可能已被释放，此时调用StateHasChanged()无法触发当前活跃组件的UI更新。
3. 组件生命周期与订阅脱节：页面切换后原组件实例可能已销毁，旧的订阅上下文仍然在执行，调用StateHasChanged()无法作用于新的组件实例。

解决方案 #

1. 替换集合类型并实现变更通知 #

将PushNotifications中的List<string>改为ObservableCollection<string>，同时让类实现INotifyPropertyChanged接口，让集合变化能自动通知UI：

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace GrpcStreamClient.Data
{
    public class PushNotifications : INotifyPropertyChanged
    {
        private string _registrationId = string.Empty;
        private bool[] _isChecked = new bool[3];
        private ObservableCollection<string> _notifications = new ObservableCollection<string>();

        public string registration_id
        {
            get => _registrationId;
            set
            {
                if (_registrationId != value)
                {
                    _registrationId = value;
                    OnPropertyChanged();
                }
            }
        }

        public bool[] isChecked
        {
            get => _isChecked;
            set
            {
                if (_isChecked != value)
                {
                    _isChecked = value;
                    OnPropertyChanged();
                }
            }
        }

        public ObservableCollection<string> notifications
        {
            get => _notifications;
            set
            {
                if (_notifications != value)
                {
                    _notifications = value;
                    OnPropertyChanged();
                }
            }
        }

        public event PropertyChangedEventHandler? PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 修复异步方法返回类型 #

Blazor中异步方法必须返回Task而非async void，确保上下文正确且异常可被捕获：

// 替换async public void subscribe()为以下代码
async public Task Subscribe()
{
    AppContext.SetSwitch(
         "System.Net.Http.SocketsHttpHandler.Http2UnencryptedSupport",
         true);
    SocketsHttpHandler handler = new SocketsHttpHandler();

    var httpClient = new HttpClient(handler)
      {
        DefaultVersionPolicy = HttpVersionPolicy.RequestVersionExact,
        DefaultRequestVersion = new Version(2, 0),
      };

    using var channel = GrpcChannel.ForAddress(IPADDRESS, new GrpcChannelOptions { HttpClient = httpClient });

    var client = new PushNotificationService.PushNotificationServiceClient(channel);

    SubscriptionRequest subscriptionRequest = new SubscriptionRequest { RegistrationId = PushNotifications.registration_id };
    subscriptionRequest.Topics.Add(createTopics);

    var reply = client.subscribe(subscriptionRequest);
    try
    {
        await foreach (var subscriptionResponse in reply.ResponseStream.ReadAllAsync())
        {
            PushNotifications.notifications.Add(subscriptionResponse);
            // 若ObservableCollection的自动通知失效，可保留手动调用
            await InvokeAsync(StateHasChanged);
        }
    }
    catch (Exception ex)
    {
        // 在此添加异常处理逻辑
    }
}

3. 在组件生命周期中管理订阅 #

确保组件激活时重新建立订阅，避免旧上下文失效：

private bool _isSubscribed = false;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && !_isSubscribed)
    {
        await Subscribe();
        _isSubscribed = true;
    }
    await base.OnAfterRenderAsync(firstRender);
}

4. 优化状态管理方式（可选） #

若PushNotifications是全局实例，建议通过依赖注入注册为Scoped服务，确保每个组件获取正确实例：

// 在Program.cs中注册
builder.Services.AddScoped<PushNotifications>();

// 组件中注入
@inject PushNotifications PushNotifications

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