Blazor中Div顺序未随列表项排序同步更新的问题求助

核心思路是把组件的状态从组件内部移到对应的列表项数据中，让状态和列表项对象绑定，而不是和组件的DOM位置绑定。

问题根源 #

• 不加@key时，Blazor会按DOM位置复用组件，排序后原来的DOM元素被复用，导致状态留在原位置，和新的列表项不匹配。
• 加了@key=item.Id时，Blazor会销毁旧位置的组件，在新位置创建新组件，组件内部的私有状态会被重置，因为新组件是从头初始化的。

具体解决步骤 #

1. 扩展你的列表项模型，添加一个用来存储组件状态的属性（比如你场景里的可修改字符串）。如果不想修改原模型，可以创建一个包装类，把原项和状态打包在一起。
2. 修改自定义组件，让它的状态通过参数和外部绑定，而不是存在组件内部的私有字段里。
3. 渲染列表时，把组件的状态参数绑定到列表项的对应属性上，同时保留@key=item.Id来让Blazor正确识别每个项的身份。

代码示例 #

1. 定义带状态的列表项模型

public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string UserInput { get; set; } // 用来存储组件的可修改状态
}

2. 修改自定义组件（以可编辑文本组件为例）

<div class="input-container">
    <input type="text" @bind="UserInput" @bind:event="oninput" />
</div>

@code {
    // 用参数接收并绑定状态，而不是内部私有字段
    [Parameter]
    public string UserInput { get; set; }

    [Parameter]
    public EventCallback<string> UserInputChanged { get; set; }
}

3. 页面中渲染列表并排序

<button @onclick="ToggleSort">反转列表</button>

<table>
    <thead>
        <tr>
            <th>标题</th>
            <th>编辑内容</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in _todoItems)
        {
            <tr @key="item.Id">
                <td>@item.Title</td>
                <td>
                    <EditableText @bind-UserInput="item.UserInput" />
                </td>
            </tr>
        }
    </tbody>
</table>

@code {
    private List<TodoItem> _todoItems = new()
    {
        new TodoItem { Id = 1, Title = "待办事项1", UserInput = "初始内容1" },
        new TodoItem { Id = 2, Title = "待办事项2", UserInput = "初始内容2" },
        new TodoItem { Id = 3, Title = "待办事项3", UserInput = "初始内容3" }
    };

    private void ToggleSort()
    {
        _todoItems.Reverse();
    }
}

为什么这样有效 #

• 状态不再存于组件内部，而是跟着列表项对象走，不管列表怎么排序，每个项的状态都和自己的对象绑定。
• @key=item.Id让Blazor能准确判断每个组件对应的是哪个列表项，排序后组件会跟着项的位置移动，而不是被复用或重建导致状态丢失/错位。

如果你的场景不能修改原模型，就用包装类：

public class ItemWithState<T>
{
    public T OriginalItem { get; set; }
    public string EditableText { get; set; } // 状态属性
}

然后渲染List<ItemWithState<YourOriginalModel>>，排序时操作这个列表即可。

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