Blazor @foreach 循环渲染集合方法

@foreach 渲染集合最直接但无键值跟踪，易致 UI 错误；应初始化为空集合而非 null，基础写法为 @foreach (var item in Items) { @item }，需索引时用 @for。

Blazor 中用 @foreach 渲染集合是最直接的方式，但要注意它不自带键值跟踪，容易在集合更新时引发 UI 错误或状态丢失。

基础写法：安全渲染简单列表

确保集合非 null，避免运行时异常。推荐用空集合初始化，而不是 null。

• 在 @code 块中定义：private List<string> Items = new();</string>
• 模板中使用：@foreach (var item in Items) { <p>@item</p> }
• 若需索引，改用 @for (int i = 0; i ，更可控

避免重复渲染问题：用 @key 指定唯一标识

@foreach 默认按位置匹配 DOM 节点，添加/删除中间项会导致后续元素重用错误的组件实例（比如输入框失焦、状态错乱）。

• 给每个循环项加上 @key，指向稳定唯一的值（如 ID）：
  @foreach (var user in Users) { <usercard user="@user"></usercard> }
• 不要用 @key="user.Name" 这类可能重复或变化的字段
• 若没有 ID，可用 @key="Guid.NewGuid()"（仅限一次性静态列表，不适用于可更新场景）

配合状态更新：别直接修改原集合引用

Blazor 组件靠引用变化触发重新渲染。直接调用 Items.Add() 不会自动刷新界面，除非显式调用 StateHasChanged() 或用新集合替换。

标签： .net