Blazor自定义MudSelect组件绑定触发无限循环问题求助

问题根源 #

1. 双向绑定循环触发：自定义组件内部使用@bind-Value="@Value"，会让MudSelect的ValueChanged事件触发组件Value属性的setter，而setter里又主动调用ValueChanged.InvokeAsync(_value)，导致父组件更新后重新传递Value到组件，形成无限循环。
2. 无值变化判断：每次设置Value都直接触发回调，即使值未发生变化，加剧了循环频率。
3. 硬编码类型不匹配：MudSelectItem的T固定为int，不符合泛型组件的设计逻辑，会导致类型兼容问题。

修复后的组件代码 #

<MudSelect T="T" Value="@Value" ValueChanged="HandleMudSelectValueChanged" For="@For">
    <!-- 后续可替换为动态生成字典选项的逻辑 -->
    <MudSelectItem T="T" Value="@(T)Convert.ChangeType(1, typeof(T))">1</MudSelectItem>
    <MudSelectItem T="T" Value="@(T)Convert.ChangeType(2, typeof(T))">2</MudSelectItem>
</MudSelect>

@code {
    [Parameter]
    public Expression<Func<T>> For { get; set; }

    private T? _value;

    [Parameter]
    public T? Value { get; set; }

    [Parameter]
    public EventCallback<T> ValueChanged { get; set; }

    [Parameter]
    public string TableName { get; set; } = "";

    protected override void OnParametersSet()
    {
        // 同步外部传入的Value到内部变量，避免参数更新时状态不一致
        if (!EqualityComparer<T>.Default.Equals(_value, Value))
        {
            _value = Value;
        }
    }

    private async Task HandleMudSelectValueChanged(T newValue)
    {
        // 仅当值真正变化时才触发回调，避免无效更新
        if (!EqualityComparer<T>.Default.Equals(_value, newValue))
        {
            _value = newValue;
            await ValueChanged.InvokeAsync(newValue);
        }
    }
}

关键修复点说明 #

• 取消内部双向绑定：将MudSelect的@bind-Value改为单向绑定Value="@Value"，手动通过HandleMudSelectValueChanged处理值变化，切断循环触发链。
• 同步参数状态：通过OnParametersSet方法确保外部传入的Value更新时，内部_value能同步，保持组件状态一致。
• 添加值相等判断：只有当新值与当前值确实不同时，才触发ValueChanged回调，避免无效的父组件更新。
• 适配泛型类型：将MudSelectItem的T改为泛型T，并通过Convert.ChangeType适配不同类型的选项值，符合泛型组件的设计要求。

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