MudBlazor中级联MudListExtended选中项高亮异常求助

问题根源 #

重复切换父列表选项后，子列表虽加载了新数据，但存在两种常见问题：一是选中值的绑定未触发组件状态更新；二是子列表数据源引用未变更，导致MudBlazor的状态检测机制未识别到数据变化，进而无法渲染选中高亮状态。

具体解决方案 #

1. 强制更新子列表数据源引用 #

父列表切换时，不要直接修改原有集合，而是创建新的集合实例，确保组件能检测到数据变化：

// 错误写法：直接修改原集合
childItems.Clear();
childItems.AddRange(fetchedData);

// 正确写法：创建新集合
childItems = new List<YourChildModel>(fetchedData);

2. 显式同步选中值与状态 #

在父项变更的回调中，设置子列表选中项后，按需触发组件状态更新：

async Task OnParentSelected(ParentModel selectedParent)
{
    // 加载子列表数据
    var newChildData = await FetchChildData(selectedParent.Id);
    // 更新子列表数据源（新实例）
    ChildItems = new List<ChildModel>(newChildData);
    // 选中第一项
    SelectedChild = ChildItems.FirstOrDefault();
    // 显式触发状态更新（Blazor组件中需调用）
    StateHasChanged();
}

3. 确保自定义类型的相等性判断正确 #

如果子列表项是自定义类，需重写Equals和GetHashCode方法，或在MudList中通过ValueField绑定值类型字段，避免组件无法识别选中项：

<MudList TItem="ChildModel" 
         SelectedItem="@SelectedChild"
         SelectedItemChanged="@OnChildSelected">
    @foreach (var item in ChildItems)
    {
        <MudListItem Value="@item.Id">@item.Name</MudListItem>
    }
</MudList>

4. 避免异步任务的状态覆盖 #

若子数据加载是异步操作，需取消之前的未完成任务，防止旧数据覆盖新数据：

private CancellationTokenSource _childLoadCts;

async Task OnParentSelected(ParentModel selectedParent)
{
    // 取消之前的加载任务
    _childLoadCts?.Cancel();
    _childLoadCts = new CancellationTokenSource();

    try
    {
        var newChildData = await FetchChildData(selectedParent.Id, _childLoadCts.Token);
        ChildItems = new List<ChildModel>(newChildData);
        SelectedChild = ChildItems.FirstOrDefault();
    }
    catch (OperationCanceledException)
    {
        // 忽略已取消的任务
    }
}

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