Blazor子组件ToggleGroup在属性变更时未即时更新UI

嘿，从React转Blazor确实容易带着旧框架的思路，不过咱们一步步来拆解你遇到的问题～

问题根源分析 #

看了你的代码，核心问题出在ToggleGroup组件的参数定义和状态同步逻辑上，主要有两个点：

1. 重复定义Value参数导致绑定冲突
   ToggleGroup继承自MudFormComponent<T, T>，这个基类已经自带了Value属性用于表单绑定。但你在ToggleGroup里又重新定义了[Parameter] public T? Value { get; set; }，这会直接覆盖基类的属性，导致父组件传递的Value无法正确同步到组件内部状态，Blazor的参数绑定机制也因此混乱了。

2. 参数变更时未同步内部状态
   就算参数传递正常，当父组件的AccessRequest.NatureOfEngagementId更新时，ToggleGroup的Value参数会变化，但组件内部的SingleSelectedValue没有主动同步这个变化，也没触发UI重绘，导致MudToggleGroup的选中状态迟迟不更新。

具体修复步骤 #

1. 移除ToggleGroup中重复定义的参数

打开ToggleGroup的C#代码，删掉以下重复的参数定义：

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

[Parameter]
public IEnumerable<T>? Values { get; set; }

这些属性基类MudFormComponent<T, T>已经提供了，完全不需要自己再定义一遍。

2. 同步参数变更到内部状态

在ToggleGroup中重写OnParametersSet方法，确保当基类的Value参数变化时，同步到内部的选中状态，触发UI更新：

protected override void OnParametersSet()
{
    base.OnParametersSet();
    
    // 处理单选场景的状态同步
    if (SelectionMode == SelectionMode.SingleSelection)
    {
        if (!EqualityComparer<T?>.Default.Equals(SingleSelectedValue, Value))
        {
            SingleSelectedValue = Value;
        }
    }
    // 处理多选场景的状态同步（如果需要支持多选的话）
    else
    {
        if (!EqualityComparer<IEnumerable<T>?>.Default.Equals(MultiSelectedValues, Values))
        {
            MultiSelectedValues = Values;
        }
    }
}

这个方法会在组件参数更新时自动触发，能保证内部状态和父组件传递的参数完全一致，进而带动UI重绘。

3. 优化SingleSelectedValue的逻辑

调整SingleSelectedValue的setter，直接操作基类的Value属性，避免状态不一致：

private T? SingleSelectedValue
{
    get => Value; // 直接返回基类的Value
    set
    {
        if (!EqualityComparer<T?>.Default.Equals(Value, value))
        {
            Value = value; // 更新基类的Value
            Touched = true;
            BeginValidateAsync();
            ValueChanged.InvokeAsync(value);
        }
    }
}

这样不管是用户手动选择选项，还是父组件参数更新，组件的状态都能保持同步。

额外验证点 #

• 你的Request类用了RequestBuilder创建新实例，是不可变对象，这点非常正确——Blazor是通过引用比较检测参数变化的，可变对象修改属性后父组件可能检测不到，不过你的p标签能正确显示更新后的值，说明这部分没问题。
• StepOne中ToggleGroup的绑定方式（Value="@AccessRequest.NatureOfEngagementId"+ValueChanged="OnEngagementChanged"）是正确的单向绑定+回调，不需要改成双向绑定，只要ToggleGroup能正确响应参数变化就好。

按照上面的步骤修改后，ToggleGroup应该就能在AccessRequest.NatureOfEngagementId变化时即时更新UI啦～

备注：内容来源于stack exchange，提问作者xxx