Blazored Typeahead自定义组件加载初始化时设置值不生效如何解决？

问题解决方法 #

1. 修正生命周期调用时机 #

父组件OnInitializedAsync执行时，子组件SearchSelect尚未完成挂载，@ref绑定的CSelect实例还为null，此时调用SetValue不会生效。需要把赋值逻辑移到父组件OnAfterRenderAsync的首次渲染阶段执行：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && Entity.Collection != null)
    {
        CSelect.SetValue(new SearchResult(Entity.Collection));
        await InvokeAsync(StateHasChanged);
    }
    await base.OnAfterRenderAsync(firstRender);
}

2. 完善SetValue方法的状态更新逻辑 #

当前SetValue仅修改了SelectedItem字段，没有触发子组件重渲染，BlazoredTypeahead组件感知不到值的变化，需要修改SetValue方法：

public void SetValue(SearchResult sr)
{
    SelectedItem = sr;
    // 触发子组件重渲染，同步更新输入框显示值
    StateHasChanged();
}

3. 可选优化：使用参数绑定替代直接操作组件引用 #

更符合Blazor开发规范的方式是通过参数绑定赋值，避免手动操作组件实例：

• 首先给SearchSelect组件新增绑定参数：

[Parameter]
public SearchResult Value { get; set; }

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

protected override void OnParametersSet()
{
    if (Value != SelectedItem)
    {
        SelectedItem = Value;
    }
    base.OnParametersSet();
}

• 调用时直接绑定值，无需声明组件引用：

<SearchSelect @key="1" 
              Value="@(Entity.Collection == null ? null : new SearchResult(Entity.Collection))"
              OnChangeId="(id)=> Entity.CollectionId=id" 
              SelectType="SSelectType.Collection" />

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