Blazor v0.3动态添加组件列表时全部被替换问题求助

嘿，这个坑我在Blazor v0.3那会儿也踩过！核心问题出在Blazor早期版本的Diff渲染算法对动态组件列表的处理逻辑上——你没给每个动态添加的组件指定唯一的Key标识，导致渲染引擎无法区分不同的组件实例，更新时就把所有现有组件都替换成了最后一个。

具体原因 #

在Blazor v0.3这个早期版本中，当你通过RenderFragment列表动态渲染组件时，如果每个条目没有绑定唯一的@key，Blazor会默认认为这些组件是同一个实例的重复渲染。当你添加新组件时，它不会创建新的组件实例，而是复用已有组件的DOM节点，并用最后一个组件的内容覆盖所有旧节点——这就是为什么第一个组件正常，添加第二个时全部被替换的原因。

解决步骤 #

1. 给每个动态组件绑定唯一Key
   如果你是直接遍历渲染组件，要给每个组件加上@key指令，用唯一值（比如自增ID、Guid或者组件的唯一参数）来标识：

   @foreach (var componentData in MyComponentDataList)
   {
       <listExample @key="componentData.UniqueId" Title="@componentData.Title" />
   }
   

2. 给RenderFragment列表添加唯一标识
   如果你是维护RenderFragment列表，建议把RenderFragment和唯一Key绑定在一起，比如定义一个承载类：

   public class RenderableComponent
   {
       public Guid Id { get; } = Guid.NewGuid(); // 自动生成唯一ID
       public RenderFragment Fragment { get; set; }
   }
   

   然后你的列表改为List<RenderableComponent>，添加新组件时创建新的RenderableComponent实例，渲染时绑定Key：

   @foreach (var item in MyRenderableComponents)
   {
       <div @key="item.Id">
           @item.Fragment
       </div>
   }
   

3. 验证效果
   你可以给每个listExample组件传一个不同的参数（比如Text="@($"组件{item.Id}")"），不加Key时所有组件的文本都会变成最后一个的内容，加了Key后每个组件会保持自己的独立状态。

补充说明 #

Blazor后续版本对Diff算法做了大量优化，Key的作用虽然依然重要，但早期版本的这个“无Key则复用覆盖”的问题会更明显。在v0.3这种初代版本里，手动指定Key是解决动态组件列表渲染异常的关键。

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