MudRadioGroup移除MudRadio后选中项显示异常的技术求助

你的问题源于MudRadioGroup的组件复用机制：删除集合前序项后，Blazor会复用已有的MudRadio组件，而MudRadioGroup内部可能依赖渲染顺序的索引维护选中状态，导致与绑定的SelectedOption不同步。

修改方案很简单，给MudRadioGroup添加动态Key，强制集合变化时组件重新初始化，确保根据SelectedOption正确匹配选中项：

<MudRadioGroup T="string" SelectedOption="@selectedItem" SelectedOptionChanged="OnSelectedOptionChanged" @key="string.Join(',', Items)">
    @foreach (var item in Items)
    {
        <div>
            <MudRadio Option="@(item)" Color="Color.Primary">@item</MudRadio>
            <MudButton OnClick="() => RemoveItem(item)" Variant="Variant.Filled">Remove</MudButton>
        </div>
    }
</MudRadioGroup>


@code {
    private string selectedItem = string.Empty;

    private List<string> Items = new()
    {
        "Item1",
        "Item2",
        "Item3"
    };

    private void OnSelectedOptionChanged(string selectedOption)
    {
        selectedItem = selectedOption;
    }

    private void RemoveItem(string item)
    {
        Items.Remove(item);
        // 可选：若选中项被删除，重置选中状态
        if (selectedItem == item)
        {
            selectedItem = Items.FirstOrDefault() ?? string.Empty;
        }
    }
}

关键说明： #

• @key="string.Join(',', Items)"：当Items内容变化时，Key值会随之改变，Blazor会销毁旧的MudRadioGroup并创建新实例，确保组件内部状态与SelectedOption完全同步。
• 额外添加的选中项删除重置逻辑，避免出现选中项不存在的异常情况。

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