Blazor导航返回报错：无法多次初始化ComponentBase异常排查

异常信息 #

返回导航时抛出以下异常：

Error: System.InvalidOperationException: The render handle is already set. Cannot initialize a ComponentBase more than once.
   at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IComponent.Attach(RenderHandle renderHandle)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AttachAndInitComponent(IComponent component, Int32 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

复现场景代码 #

向导页动态渲染Razor代码 #

@foreach( WizardSeite seite in WizardSeiten )
{
    <WizardStep Label="@seite.Title" OnChange="@ReactOnChange">
        <Content>
            <DynamicComponent @ref="@currentPage" Type="@seite.GetType()" Parameters="@seite.Parameters"></DynamicComponent>
        </Content>
    </WizardStep>
}

向导页DI注册代码 #

if( component.BaseType == typeof( WizardSeite ) )
{
     // 注册Wizard页为WizardSeite基类的Transient服务
     services.AddTransient( component.BaseType ?? throw new NullReferenceException(), component );
}

自定义IComponentActivator逻辑 #

instance = registeredPages.First( seite => seite.GetType() == componentType );

根因分析 #

• Blazor 组件生命周期有强制约束：每个ComponentBase实例只能被附加到渲染树一次。组件首次初始化时Attach方法会写入渲染句柄，后续如果尝试对同一个实例再次调用Attach，就会直接抛出本次遇到的异常。
• 自定义IComponentActivator逻辑错误：激活组件时直接返回了预先创建、已经完成过渲染附加的旧组件实例。点击返回导航时，Telerik Wizard会重新构建对应步骤的渲染子树，需要初始化步骤内的组件，此时拿到的是已经绑定过渲染句柄的旧实例，直接触发重复初始化校验。
• DI配置未生效：虽然注册服务时指定了Transient生命周期，但自定义激活器直接从预存实例集合取对象，完全绕过了DI容器的实例创建流程，Transient的每次请求返回新实例的规则根本没有执行。
• 附带逻辑缺陷：循环内所有DynamicComponent都绑定了同一个@ref="currentPage"字段，最终该字段只会存储遍历到的最后一个组件实例，无法正确获取对应步骤的组件引用。

解决方案 #

• 优先方案（改动最小，符合Blazor设计规范）：
  1. 修改自定义IComponentActivator逻辑，禁止复用已渲染过的组件实例，每次激活组件时从DI容器获取新的Transient实例：

     // 替换原有从registeredPages取实例的逻辑
     instance = _serviceProvider.GetRequiredService(componentType);
     

  2. 不要靠复用组件实例保留向导页填写状态，将页面状态抽离到独立的Scoped级别状态服务中，每个向导页在OnParametersSet生命周期从状态服务读取历史值、在参数变更时把新值写入状态服务即可。
  3. 修复@ref绑定问题，改用集合类型存储每个动态组件的引用，不要用单个字段接收循环内的所有组件ref。
• 简化方案：
  移除自定义IComponentActivator和Wizard页的DI注册逻辑，直接给DynamicComponent传入页面类型，使用Blazor默认的组件激活逻辑创建实例，状态维护逻辑和上述方案一致，抽离到独立状态服务。
• 组件缓存方案（仅适用于.NET 8+版本）：
  如果确实需要缓存组件实例减少重复渲染开销，不要手动通过IComponentActivator复用实例，改用Blazor内置的KeepAlive组件包裹DynamicComponent，由框架统一管理组件实例的附加、分离和存活周期，避免手动控制实例引发生命周期冲突。

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