调用父组件方法无法填充Blazor组件，求排查原因

问题原因 #

当通过父组件的@ref调用子组件的Load()方法时，Elements已成功赋值，但Blazor未收到组件状态变更通知，因此不会重新渲染UI。这是因为Task.Run执行的代码脱离了Blazor的同步上下文，数据更新后组件无法自动感知变化。

解决方案 #

在Load()方法完成数据赋值后，手动调用StateHasChanged()方法，通知Blazor组件状态已变更，触发重新渲染。

修改后的Repository组件代码 #

<h3>Repository</h3>

@if(Elements == null)
{
    <span>加载中...</span>
}
else
{
    <span>@Elements.Count elements</span>
    <ul class="list-group">
        @foreach (var element in Elements)
        {
            <li class="list-group-item">@element</li>
        }
    </ul>
}

@code {
    protected List<string>? Elements { get; set; }

    public async Task Load()
    {
        Elements = await Task<List<string>>.Run(() =>
        {
            List<string> liste = new();
            liste.Add("a1");
            liste.Add("b1");
            liste.Add("c1");        
            return liste;
        });
        // 通知组件状态变更，触发重新渲染
        StateHasChanged();
    }
}

补充说明 #

• 若Load()方法在Blazor同步上下文内执行（不使用Task.Run），可能无需手动调用StateHasChanged()，但使用Task.Run时必须手动触发，因为后台线程操作不会自动同步到UI线程的状态变更。
• 父组件调用repo.Load()时，建议使用await repo.Load()确保异步操作完成，避免竞态问题。

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