.NET 8 Blazor应用状态管理失效：遵循Carl Franklin方案遇问题求助

核心问题分析 #

问题根源在于.NET 8 Blazor默认开启预渲染，而原方案未适配该场景：

• 预渲染阶段无浏览器环境，LocalStorage无法初始化，导致实例为null
• 组件未完成渲染绑定前调用StateHasChanged()，触发The render handle is not yet assigned.异常
• 根级级联组件CascadingAppState的初始化逻辑未区分预渲染与客户端渲染阶段，导致变量未完成赋值

具体修复步骤 #

1. 禁用预渲染（快速解决） #

在Program.cs中修改Blazor组件注册代码，直接禁用预渲染：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(options =>
    {
        options.DisablePrerendering = true;
    });

2. 适配预渲染场景（推荐方案） #

若需保留预渲染，修改CascadingAppState组件逻辑，区分预渲染与客户端渲染阶段：

@implements IAsyncDisposable
@inject ILocalStorageService LocalStorage
@rendermode InteractiveServer

@if (!isInitialized)
{
    <p>加载中...</p>
}
else
{
    <CascadingValue Value="this" IsFixed="true">
        @ChildContent
    </CascadingValue>
}

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    private bool isInitialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 仅在客户端渲染完成后初始化LocalStorage及状态
            await InitializeStateAsync();
            isInitialized = true;
            StateHasChanged();
        }
    }

    private async Task InitializeStateAsync()
    {
        // 从LocalStorage加载状态的逻辑
        var savedState = await LocalStorage.GetItemAsync<string>("AppState");
        // 补充状态初始化代码
    }

    public void NotifyStateChanged()
    {
        // 检查渲染句柄是否已赋值，避免异常
        if (RenderHandle.IsInitialized)
        {
            StateHasChanged();
        }
    }

    public async ValueTask DisposeAsync()
    {
        // 清理资源逻辑
    }
}

3. 确保根级级联组件正确注册 #

在App.razor中，用CascadingAppState包裹所有路由内容：

<CascadingAppState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAppState>

验证修复 #

完成修改后重新运行项目：

• LocalStorage实例会在客户端渲染阶段正常初始化
• 调用NotifyStateChanged()时不再抛出渲染句柄异常
• 任意组件可通过级联参数正常访问CascadingAppState

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