Blazor中HTML Select的OnChange触发后如何重载ContenuCongelateur组件

问题根因 #

Blazor组件的OnInitialized生命周期仅会在组件首次创建时执行一次，后续父组件更新传入的CongelateurSelected参数时，子组件不会重新执行初始化逻辑，因此服务端数据拉取逻辑不会触发，组件不会更新。

可行解决方案 #

方案1：子组件监听参数变化自动刷新（推荐）

将子组件的数据拉取逻辑迁移到OnParametersSet生命周期，该生命周期会在每次传入参数变化时自动触发，无需修改父组件代码。

修改ContenuCongelateur.razor的@code部分：

[Parameter]
public int CongelateurSelected { get; set; }

CongelateurService congelateurService = new CongelateurService(DBContextConstant.ConnectionString);
public List<LigneCongelateurDto> Contenu_Congelateur { get; set; }

protected override void OnInitialized()
{
    LoadData();
}

protected override void OnParametersSet()
{
    // 参数变化时重新拉取数据
    LoadData();
}

private void LoadData()
{
    if (CongelateurSelected > 0)
    {
        Contenu_Congelateur = congelateurService.GetListeDetailleeDispoCongel(CongelateurSelected);
    }
}

方案2：@key强制重建子组件（改动最小）

直接修改父组件中子组件的引用，添加@key属性绑定选中值，Blazor会在key变化时销毁旧组件、创建新组件，自动重新执行初始化逻辑拉取最新数据。

修改Index.razor中的子组件调用代码：

<ContenuCongelateur 
    @key="indexModel.CongelateurSelected" 
    CongelateurSelected="indexModel.CongelateurSelected">
</ContenuCongelateur>

方案3：父组件手动触发子组件刷新

适合需要自定义刷新时机的场景，先给子组件添加公开刷新方法，父组件通过引用调用该方法。

第一步：修改ContenuCongelateur.razor添加公开方法：

[Parameter]
public int CongelateurSelected { get; set; }

CongelateurService congelateurService = new CongelateurService(DBContextConstant.ConnectionString);
public List<LigneCongelateurDto> Contenu_Congelateur { get; set; }

protected override void OnInitialized()
{
    LoadData();
}

// 公开刷新方法
public void Refresh()
{
    LoadData();
    StateHasChanged();
}

private void LoadData()
{
    if (CongelateurSelected > 0)
    {
        Contenu_Congelateur = congelateurService.GetListeDetailleeDispoCongel(CongelateurSelected);
    }
}

第二步：修改Index.razor添加子组件引用，Update方法中调用刷新：

<ContenuCongelateur 
    @ref="_contenuCongelateurRef" 
    CongelateurSelected="indexModel.CongelateurSelected">
</ContenuCongelateur>

@code {
    // 子组件引用
    private ContenuCongelateur _contenuCongelateurRef;

    private void Update(ChangeEventArgs args)
    {
        indexModel.CongelateurSelected = int.Parse(args.Value.ToString());
        // 手动触发刷新
        _contenuCongelateurRef.Refresh();
    }
}

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