Blazor Server调用StateHasChanged报render handle未分配异常

核心根因 #

你踩了Blazor组件开发的3个典型禁忌，直接触发了这个异常：

• 最直接的原因：你在AppSettings静态类里手动写了public static MainLayout _layout { get; set; } = new MainLayout();，自己new了一个MainLayout组件实例。Blazor的所有组件（布局、页面、通用组件）必须由框架的渲染引擎创建、挂载到渲染树上才会分配渲染句柄（RenderHandle），你手动new出来的实例和Blazor渲染上下文完全没有关联，调用StateHasChanged()的时候框架找不到对应的渲染句柄，直接抛错。
• 第二个错误：你试图用静态类持有组件实例。Blazor Server是按用户电路（Circuit）做隔离的，每个访问用户都会生成独立的MainLayout实例，静态字段是全局共享的，要么存的是你自己new的无效实例，要么会出现多用户状态串扰的问题，完全不符合Blazor的组件生命周期设计。
• 第三个错误：你在LoadingScreenShowing方法里写了load = new Loading();手动给组件@ref赋值。组件引用是Blazor渲染时自动填充的，手动new出来的Loading组件实例同样没有被渲染引擎接管，就算不抛异常也不会显示在页面上。
• 额外的逻辑缺陷：你的PageLoading方法是同步执行的，就算前面的问题都修复，同步执行的时候UI线程会被阻塞，Loading(true)触发的渲染根本不会执行，你会直接跳到加载结束的状态，用户看不到加载屏。另外你给按钮绑定事件用了原生onclick而不是Blazor的@onclick指令，实际运行时根本不会触发你写的C#方法，会去找同名JS函数。

正确实现方式 #

不要用静态类存组件实例，用作用域服务做跨组件的状态通信，这是Blazor推荐的标准实现：

1. 先写一个作用域级别的加载状态服务，每个用户独立持有一份状态：

public class AppLoadingService
{
    public bool IsLoading { get; private set; }
    public event Action? LoadingStateChanged;

    public void SetLoading(bool isLoading)
    {
        IsLoading = isLoading;
        LoadingStateChanged?.Invoke();
    }
}

在Program.cs里注册服务：

builder.Services.AddScoped<AppLoadingService>();

2. 修改MainLayout，订阅服务的状态变更事件，不需要暴露公共方法给外部调用，也不要手动new任何组件：

@inherits LayoutComponentBase
@inject AppLoadingService LoadingService
@implements IDisposable

<PageTitle>BlazorApp1</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <Loading IsVisible="@LoadingService.IsLoading" />
            @Body
        </article>
    </main>
</div>

@code {
    protected override void OnInitialized()
    {
        LoadingService.LoadingStateChanged += StateHasChanged;
    }

    public void Dispose()
    {
        LoadingService.LoadingStateChanged -= StateHasChanged;
    }
}

3. 修改Index.razor的逻辑，用异步方式执行耗时操作，保证加载状态能正常渲染：

@page "/"
@inject AppLoadingService LoadingService

<button @onclick="PageLoading">Load</button>

@code{
    private async Task PageLoading()
    {
        LoadingService.SetLoading(true);
        // 让出UI线程，先把加载屏渲染出来
        await Task.Yield();
        try
        {
            // 这里替换成你的实际业务逻辑，注意要用异步API
            await Task.Delay(2000); // 模拟耗时操作
        }
        finally
        {
            // 无论业务执行成功还是报错，都要关闭加载屏
            LoadingService.SetLoading(false);
        }
    }
}

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