.NET MAUI Blazor Hybrid中调用StateHasChanged()触发空引用异常

是否有开发者遇到过同类问题？ #

是的，不少跨WASM和MAUI Blazor Hybrid开发的开发者都碰到过这个问题。核心场景都是组件未完成初始化、已被销毁，或是尚未绑定到Blazor渲染上下文时触发了StateHasChanged()，最终导致空引用异常。MAUI Blazor的原生宿主环境和纯WASM的浏览器环境在组件生命周期执行时机上的差异，是这类问题的主要诱因。

.NET MAUI Blazor Hybrid的组件生命周期对StateHasChanged()的影响差异 #

MAUI Blazor Hybrid是将Blazor组件嵌入到原生MAUI页面中，和纯WASM的浏览器环境相比，组件生命周期有几个关键差异会影响StateHasChanged()：

• 初始化时机延迟：MAUI中组件实例创建后，需要等待原生页面加载完成、Blazor渲染上下文绑定完毕，才能正常调用StateHasChanged()。如果在OnInitialized阶段就订阅状态变更事件，此时组件还未完成AttachToRenderTree操作，触发事件时调用StateHasChanged()就会抛出空引用。
• 销毁阶段的异步性：当MAUI原生页面被导航离开时，组件的Dispose方法可能不会立即执行，或是渲染上下文已被释放，但之前订阅的状态变更事件并未取消。后续状态变更触发时，组件实例已无效，调用StateHasChanged()就会出错。
• 线程上下文差异：MAUI运行在原生UI线程，而状态变更事件可能来自后台线程。WASM中浏览器会自动处理渲染线程同步，但MAUI中如果直接在非UI线程调用StateHasChanged()，会因同步上下文不匹配导致异常，甚至空引用。

共享Razor组件订阅状态变更的最佳实践 #

针对跨WASM和MAUI Blazor的场景，推荐以下几种最佳实践：

• 生命周期钩子内管理订阅：在组件的OnInitialized（或OnAfterRenderAsync首次渲染后）中订阅状态变更事件，在Dispose方法中取消订阅，确保组件仅在有效生命周期内接收通知：

  protected override void OnInitialized()
  {
      ApplicationState.StateChanged += OnStateChanged;
      base.OnInitialized();
  }
  
  public void Dispose()
  {
      ApplicationState.StateChanged -= OnStateChanged;
      GC.SuppressFinalize(this);
  }
  

• 调用前检查组件有效性：在OnStateChanged方法中，先判断组件是否已被销毁，再调用StateHasChanged()，同时用InvokeAsync确保在正确的同步上下文执行：

  protected void OnStateChanged(object sender, EventArgs e)
  {
      if (!IsDisposed)
      {
          _ = InvokeAsync(StateHasChanged);
      }
  }
  

• 利用Fluxor原生特性替代手动订阅：Fluxor提供了IState<T>注入和UseSelector等特性，自动处理状态订阅和组件刷新，无需手动调用StateHasChanged()。例如：

  [Inject]
  private IState<ApplicationState> AppState { get; set; }
  

  在Razor模板中直接绑定AppState.Value，Fluxor会自动监听状态变更并触发组件更新，避免手动管理订阅的风险。
• 统一同步上下文处理：无论在WASM还是MAUI环境中，都用InvokeAsync包裹StateHasChanged()的调用，确保操作被调度到Blazor的渲染同步上下文，避免线程相关的异常。

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