Blazor父组件触发事件后调用子组件方法更新列表不渲染问题

1. 循环中子组件@ref引用错误 #

你在@foreach循环中给所有子组件绑定了同一个@ref="woTemplateRow"变量，最终该变量只会指向最后一个渲染的WoTemplateRow实例。当你给非最后一个工作流添加新行时，调用的根本不是对应子组件的GetTemplates方法，自然不会更新对应列表。

修复方案 #

改用字典集合存储所有子组件实例：

1. 父组件后置代码中添加ref集合定义：

private Dictionary<int, WoTemplateRow> woTemplateRowRefs = new();

2. Razor循环中修改子组件ref绑定逻辑：

<WoTemplateRow 
    Id="@item.WorkFlowItemId" 
    @ref="(refInstance) => woTemplateRowRefs[item.WorkFlowItemId] = refInstance" 
/>

3. 调用时按工作流ID取对应子组件实例：

if(woTemplateRowRefs.TryGetValue(id, out var targetRow))
{
    await targetRow.GetTemplates();
}

2. 子组件数据更新后未触发重渲染 #

Blazor只会对组件生命周期内的异步方法、UI事件触发的异步方法自动调用StateHasChanged触发重渲染，从外部手动调用的GetTemplates方法不会自动触发重渲染逻辑，因此数据更新后界面不会同步刷新。

修复方案 #

在子组件GetTemplates方法末尾手动触发重渲染：

public async Task GetTemplates()
{
    templates = await _repoTemplate.Get(EndPoints.TvWorkOrderEndpoint + $"GetTemplateByWorkFlowId?workFlowId={Id}");
    // 手动通知Blazor界面需要更新
    StateHasChanged();
}

3. 循环渲染子组件缺少@key标识 #

Blazor循环渲染组件时如果没有指定@key，会导致内部差量更新逻辑异常，无法正确识别需要更新的组件实例。

修复方案 #

给循环中的子组件添加唯一@key标识：

<WoTemplateRow 
    @key="item.WorkFlowItemId"
    Id="@item.WorkFlowItemId" 
    @ref="(refInstance) => woTemplateRowRefs[item.WorkFlowItemId] = refInstance" 
/>

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