.NET 8 Blazor单页渲染中PersistentComponentState注册报错求解

错误原因 #

从静态渲染的父组件导航到标记为@rendermode InteractiveWebAssembly的组件时，服务器端预渲染阶段注册的PersistingComponentState回调未明确关联目标渲染模式，框架无法识别该回调属于WebAssembly组件流程，因此抛出InvalidOperationException。

解决方案 #

1. 注册回调时显式指定渲染模式 #

使用PersistentComponentState.RegisterOnPersisting的重载方法，传入renderMode参数明确指定为RenderMode.InteractiveWebAssembly，让框架将回调与WebAssembly组件的渲染流程绑定。

2. 修改组件代码 #

调整OnInitializedAsync中的注册逻辑，添加渲染模式参数：

@inject PersistentComponentState ApplicationState
@rendermode InteractiveWebAssembly
@using Microsoft.AspNetCore.Components.Web

...

@code {
   private PersistingComponentStateSubscription subscription;
   private CancellationTokenSource? cts;
   private MapInitialization? MapInitialization;

protected override async Task OnInitializedAsync()
{    
    cts = new CancellationTokenSource();

    // 显式指定渲染模式为InteractiveWebAssembly
    subscription = ApplicationState.RegisterOnPersisting(
        () =>
        {
            if (MapInitialization != null)
            {
                ApplicationState.PersistAsJson("MapInit", MapInitialization);
            }
            return Task.CompletedTask;
        },
        renderMode: RenderMode.InteractiveWebAssembly // 关键：绑定目标渲染模式
    );

    if (ApplicationState.TryTakeFromJson("MapInit", out MapInitialization? storedData))
    {
        MapInitialization = storedData;
    }
    else
    {
        MapInitialization = await GrsService.GetMapInitialization(cts.Token);

        if (MapInitialization is not null)
        {
            MapInitialization.Plants = await GrsService.GetPlants(MapInitialization.MapSettings?.VisiblePlants, cts.Token);
        }
    }
}

public void Dispose()
{
    cts?.Cancel();
    subscription?.Dispose();
}
}

3. 关键说明 #

• 指定renderMode后，框架会确保仅当组件以InteractiveWebAssembly模式渲染时触发该回调，解决了静态父组件与WebAssembly子组件的状态注册关联问题。
• 预渲染阶段（服务器端）获取的数据会被持久化，客户端激活时直接读取，避免重复调用数据库，满足你避免两次数据请求的需求。
• 实现IDisposable接口取消订阅并释放资源，防止内存泄漏。

验证要点 #

• 确保GrsService在服务器端预渲染时可正常访问（若服务为客户端专属，需在服务器端提供兼容实现或区分环境处理）。
• 导航组件时检查服务器端日志，确认数据库仅被调用一次，客户端激活时直接读取持久化状态。

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