如何在Blazor中正确更新多个子组件

Question

我有一个名为DataPageComponent的组件。它本质上有一个数据范围和一个搜索按钮。带有GraphComponents的列表。

当我点击搜索按钮时，我需要告诉所有的孩子GraphComponent执行http请求并获取他们的新数据。

<div class="py-2">
<MudDatePicker @bind-value="dateTime" />
<MudButton OnClick="OnSearchClicked">Search</MudButton>
</div>
@foreach (var group in Groups)
{
<MudPaper Class="mt-2 pt-2 pb-4">
<MudText Class="pl-2" Typo="Typo.h3">@group.Title</MudText>
<GenericModbusGraphComponent Group="@group" Model="QueryModel" />
</MudPaper>
}
@code {
[Parameter, EditorRequired]
public long DeviceId { get; set; }
[Parameter, EditorRequired]
public List<DeviceGroupDto> Groups { get; set; }    
private DateTime dateTime { get; set; }    

private SensorQueryModel QueryModel { get; set; }
protected override async Task OnInitializedAsync()
{
var offset = await _tzService.GetLocalDateTime(DateTimeOffset.UtcNow);
//Default Query Model
QueryModel = new SensorQueryModel
{
SensorId = DeviceId,
DateTo = DateTime.Now,
DateFrom = DateTime.Now.AddDays(-7),
Interval = Global.TenMinInSeconds,
TimeZoneOffset = offset.Offset.Hours
};
}
private async Task OnSearchClicked()
{
foreach (var views in Groups.Where(x => x.ViewReferenceGraphs != null))
{
await ((GenericModbusGraphComponent)views.ViewReferenceGraphs).UpdateData(QueryModel);
//Note: Each child will call update view on thier own, no need to do it here
}
}
}

现在我已经非常困惑了，但我所有的图现在都在同步加载，我需要每个图组件运行自己的http get并独立呈现其视图。

我该如何正确地告诉每个子组件更新其数据，然后在它们自己的线程中查看每个子组件。

这是我的renderGraphComponent的代码。

@if (Loading)
{
<LoadingIcon />
}
else
{
<SimpleChartComponent DataSet="_response" Heading="@Group.Title"></SimpleChartComponent>
}
@code {
[Parameter]
public SensorQueryModel Model { get; set; }

[Parameter]
public DeviceGroupDto Group { get; set; }    
private List<XyStatsResponse> _response;    
private bool Loading { get; set; } = false;    

protected override async Task OnInitializedAsync()
{
//Only load data one time.
if (_response == null && Loading == false)
{
if (Model != null)
{
await UpdateData();
}
}
}    

// used to externally update the graph data     
public async Task UpdateData(SensorQueryModel model)
{
Model = model;

Loading = true;
StateHasChanged();
//Make query
var queryModel = new SensorGroupQueryModel
{
SensorId = Model.SensorId,
DateFrom = Model.DateFrom,
DateTo = Model.DateTo,
TimeZoneOffset = Model.TimeZoneOffset,
Group = Group.Title,
Interval = Model.Interval
};
_response = await _repository.GetHistoryDataForGroup(queryModel);

//State has change due to loading signs and hopefully response data
Loading = false;
StateHasChanged();
}

Answer 1

创建任务列表：

List<Task> tasks = new();
foreach (var views in Groups.Where(x => x.ViewReferenceGraphs != null))
{
var task = ((GenericModbusGraphComponent)views.ViewReferenceGraphs).UpdateData(QueryModel);
tasks.Add(task);
}
await Task.WhenAll(tasks);