Blazor技术问题：如何将深层嵌套子组件绑定到页面变量？

核心问题分析 #

1. 同步方法导致状态更新失效：页面中的AutocompleteSearch是void同步方法，Blazor无法跟踪这类方法的执行完成，因此不会自动触发组件重新渲染，导致封装组件无法感知数据变化。
2. 组件参数绑定的单向性：封装组件的Items是[Parameter]，属于单向绑定。页面更新数据后，封装组件不会自动刷新该参数，同步方法也未触发父组件重新渲染流程。
3. 事件参数类拼写错误：补充方案中的AutocompleteSearchEventArgs构造函数里，earchValue = searchValue少写了S，导致SearchValue始终为空，搜索逻辑无效。

分步解决方案 #

1. 修正页面搜索方法为异步Task #

将页面中的同步方法改为async Task，即使数据库操作是同步的，也用Task.FromResult包装，确保Blazor能正确处理异步流程：

private async Task AutocompleteSearch(AutocompleteReadDataEventArgs args)
{
    if (!args.CancellationToken.IsCancellationRequested)
    {
        // 若DB.SearchSampleItems是同步方法，用Task.FromResult包装
        AutocompleteItems = await Task.FromResult(DB.SearchSampleItems(args.SearchValue));
    }
}

2. 封装组件改用内部状态维护Items #

避免直接依赖父组件传递的Items参数，改为封装组件内部维护数据状态，通过回调获取结果后更新内部状态，确保组件自身感知数据变化：

@typeparam TKey

<Blazorise.Components.Autocomplete 
        TItem="AutocompleteItem<TKey>" 
        TValue=TKey
        Data="@_internalItems"
        ReadData="@AutocompleteSearch"
        TextField="@((item) => item.Display)"
        ValueField="@(( item ) => item.ID)"
        Placeholder="@Placeholder"
        Debounce="true"
        DebounceInterval="100"
        FreeTyping="false"
        @bind-SelectedValue="SelectedID"
        @bind-SelectedText="SelectedText">
        <ItemContent>
            @if (context.Item.FrequentlyUsed)
            {
                <span class="@FrequentlyUsedClass">&nbsp;</span>
            }
            @context.Text
        </ItemContent>
</Blazorise.Components.Autocomplete> 

@code {
    [Inject]
    public ILogger<Blazorise.Components.Autocomplete<TKey, AutocompleteItem<TKey>>> Logger { get; set; }

    [Parameter]
    public string Placeholder { get; set; } = "Search...";

    [Parameter]
    public string FrequentlyUsedClass { get; set; } = "text-warning icon-dashboard-star-full";

    // 内部状态维护数据，不再作为参数
    private IEnumerable<AutocompleteItem<TKey>>? _internalItems { get; set; }

    [Parameter]
    public Func<AutocompleteReadDataEventArgs, Task<IEnumerable<AutocompleteItem<TKey>>>> OnSearch { get; set; }

    [Parameter]
    public TKey SelectedID { get; set; }

    [Parameter]
    public string SelectedText { get; set; }

    private async Task AutocompleteSearch(AutocompleteReadDataEventArgs args)
    {
        Logger.LogTrace("Search start.");
        
        // 直接通过OnSearch获取结果，更新内部状态
        _internalItems = await OnSearch.Invoke(args);
        StateHasChanged();

        Logger.LogTrace($"Items found: {_internalItems?.Count() ?? 0}");
        Logger.LogTrace("Search complete.");
    }
}

3. 页面中调整回调方式 #

页面中改为传递返回结果的Func：

@code {
    [Inject]
    private IDAL DB { get; set; }

    private int AutoCompleteSelectedID { get; set; }
    private string? AutocompleteSelectedText { get; set; }

    private async Task<IEnumerable<AutocompleteItem<int>>> AutocompleteSearch(AutocompleteReadDataEventArgs args)
    {
        if (!args.CancellationToken.IsCancellationRequested)
        {
            return await Task.FromResult(DB.SearchSampleItems(args.SearchValue));
        }
        return Enumerable.Empty<AutocompleteItem<int>>();
    }
}

4. 修正补充方案中的拼写错误 #

如果使用AutocompleteSearchEventArgs方案，先修正构造函数的拼写错误：

public AutocompleteSearchEventArgs(string searchValue, CancellationToken cancellationToken = default(CancellationToken))
{
    CancellationToken = cancellationToken;
    SearchValue = searchValue; // 修正为SearchValue，不是earchValue
}

关键原理说明 #

Blazor的状态更新依赖组件渲染周期：

• 异步方法（async Task）执行完成后，Blazor会自动触发组件重新渲染；
• 同步void方法不会触发自动渲染，且无法跟踪执行完成时间；
• 组件参数是单向数据流，子组件不应直接修改参数，应通过回调让父组件更新数据，或子组件维护内部状态来控制UI。

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