MudRadioGroup无法切换且回调触发两次问题求助

常见问题原因及修复方案 #

1. 双向绑定与事件回调重复绑定
   如果你同时使用了@bind-SelectedOption和SelectedOptionChanged事件，会导致框架自动触发一次回调，你的手动绑定又触发一次，最终造成两次调用。
   修复：只保留一种绑定方式。比如移除@bind-SelectedOption，在回调里手动更新字段：

   <MudRadioGroup T="string" SelectedOption="@_selectedOption" SelectedOptionChanged="OnSelectedOptionChanged">
       <MudRadio Value="Option1">选项1</MudRadio>
       <MudRadio Value="Option2">选项2</MudRadio>
   </MudRadioGroup>
   

   后台代码：

   private string _selectedOption = "Option1";
   
   private void OnSelectedOptionChanged(string newValue)
   {
       // 先判断值是否变化，避免重复执行
       if (_selectedOption != newValue)
       {
           _selectedOption = newValue;
           // 在这里编写你的业务逻辑
       }
   }
   

2. 手动调用StateHasChanged()导致重复渲染
   如果在OnSelectedOptionChanged里手动调用了StateHasChanged()，而MudBlazor组件本身已经会触发状态更新，就会引发二次触发。
   修复：删掉手动调用的StateHasChanged()，让组件自行处理状态更新。

3. 父组件重渲染连带触发子组件事件
   检查父组件是否存在不必要的重渲染（比如父组件参数频繁变化），会导致MudRadioGroup重新渲染并触发事件。
   修复：给MudRadioGroup添加@key="_selectedOption"，确保组件仅在选中值变化时才重新渲染：

   <MudRadioGroup T="string" SelectedOption="@_selectedOption" SelectedOptionChanged="OnSelectedOptionChanged" @key="_selectedOption">
       <!-- 单选按钮内容 -->
   </MudRadioGroup>
   

4. 异步方法处理不当
   如果OnSelectedOptionChanged是异步方法，却没有用async/await或者未返回Task，可能导致状态更新异常，进而引发重复触发。
   修复：将方法改为标准异步格式：

   private async Task OnSelectedOptionChanged(string newValue)
   {
       if (_selectedOption != newValue)
       {
           _selectedOption = newValue;
           await YourAsyncBusinessLogic();
           // 无需手动调用StateHasChanged()
       }
   }
   

验证小技巧 #

调试时可以在OnSelectedOptionChanged里打印newValue和当前_selectedOption的值，确认两次调用的参数是否一致，以此排查是重复触发还是值更新异常。

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