Blazor组件未在状态更改时调用OnInitializedAsync，链式数据提取

Question

我是blazor的新手，仍在学习，我的仪表板有状态问题。

我有一个组件可以获取仪表板和面板：

@if (Data == null)
{
<Loader></Loader>
return;
}
<Row NoGutters="true">
@foreach (var panel in Data.Panels)
{
<Column XS="12" SM="12" MD="6" LG="6" XL="4" Class="mb-4">
<CascadingValue Value="@panel.Id">
<DashboardMatare DateHeader="@panel.DateHeader" Header="@panel.Header" ></DashboardMatare>
</CascadingValue>
</Column>
}
</Row>

它通过OnParametersSetAsync获取数据，工作正常，获取新面板并将其呈现为

但当我切换到另一个仪表板时，前一个仪表盘的相同值仍然存在于"0"；DashboardMatareChartJs"；。

如果面板数量不同，它将呈现新面板。

我把panelId级联到孩子们身上，这样blazor就会明白它需要改变状态。

DashboardMatare：

<DashboardContainer>
<DashboardHeader Header="@Header" DateHeader="@DateHeader"></DashboardHeader>
<CascadingValue Value=PanelId>
<DashboardMatareChartJs />
</CascadingValue>

DashboardMatareChartJs:

if (Data == null)
{
<Loader />
return;
}
<div class="pl-3">
<Row NoGutters="true" Class="h-75">
<Column Class="col-12">
<div class="matare">
<div class="valueWrapper">
<canvas class="meterGraph" ref="ReferenceToChartJs">
</canvas>
</div>
</div>
</Column>
</Row>
<Row>
<Column Class="text-left col-12">
<DashboardJamforMed JamforMedText="Data.JamforMedText" IsProcent="Data.ShowPercentage"></DashboardJamforMed>
</Column>
</Row>
</div>

[Inject]
protected HttpClient HttpClient { get; set; }
[CascadingParameter]
public Guid PanelId { get; set; }
public ElementReference ReferenceToChartJs { get; set; }
[Inject]
private IJSRuntime JsRuntime { get; set; }
public DashboardPanelGraphDataDto Data { get; set; }
protected override async Task OnInitializedAsync()
{
Data = await HttpClient.GetFromJsonAsync<DashboardPanelGraphDataDto>($"api/DashboardBlazor/GetChartData/{PanelId}");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (Data == null || ReferenceToChartJs.Context == null)
{
return;
}
await JsRuntime.InvokeVoidAsync("chartService.drawGraph", ReferenceToChartJs, Data.ChartData, Data.TypeOfGraph, Data.ShowPercentage);
}

DashboardHeader将始终具有正确的数据

问题似乎是，当PanelId更改时，组件不会调用OnInitializedAsync。我认为这是一个结构问题，因为我试图通过@ref强制statehaschanged并从parent调用statehaschanged，但仍然不起作用。

如果我在"0"上通过OnParametersSetAsync获取数据；DashboardMatareChartJs"；然后它会加载新的数据，但它会加载几次，而且是针对不在视图中的面板。我知道这意味着我可能还没有100%理解blazor的生命周期，所以希望有人能把我推向正确的方向。

提前感谢！

Answer 1

尝试使用@key指令属性来强制Blazor重建DashboardMatare对象，如下所示：

<DashboardMatare @key="@panel.Id" DateHeader="@panel.DateHeader" Header="@panel.Header" ></DashboardMatare>

这个答案基于以下内容：

您还可以使用@key来防止Blazor在对象更改时保留元素或组件子树：

<div @key="currentPerson">
... content that depends on currentPerson ...
</div>

如果@currentPerson发生更改，@key属性指令将强制Blazor放弃整个及其子代，并在UI中使用新元素和组件重建子树。如果您需要保证@currentPerson更改时不会保留任何UI状态，那么这将非常有用。

链接到源。。。