Razor组件中的Foreach循环导致等待失败

Question

我是Blazor和.NET6的新手，但我正在开发一个小型应用程序。我让LiteDB在后端存储数据，而我的Razor组件正在获取数据。问题是，虽然80%的时间它按预期工作，但其他20%的时间数据在数据库调用处理之前就在Razor部件中填充为null。调试时，我看到代码到达后端的数据库调用，然后跳回前端Razor组件，该组件现在有一个null对象，然后跳回到数据库调用已经完成的后端。但是页面是从null对象填充的，所以数据不在那里。我在控制台中收到一个错误，但它只是说明在我的代码中，对象没有设置为foreach循环中对象的实例。这是我的代码：

@page "/origin"
@page "/origin/{id:int}"
@inject HttpClient http
@if (id == null)
{
<PageTitle>Origin Not Found</PageTitle>
<h3>Origin Not Found</h3>
}
else
{
<PageTitle>Origin: @origin.Name</PageTitle>
<h3>Origin: @origin.Name</h3>
<table class="table">
<tbody>
<tr>
<td>Description: </td>
<td>@origin.Description</td>
</tr>
<tr>
<td>Starting Health: </td>
<td>@origin.StartingHealth</td>
</tr>
<tr>
<td>Ground Movement Speed: </td>
<td>@origin.GroundMovementSpeed</td>
</tr>
@foreach(var stat in @essences)
{
<tr>
<td>Essence Increase Option: </td>
<td>@stat</td>
</tr>
}
<tr>
<td>Origin Benefit: </td>
<td>@origin.OriginBenefit</td>
</tr>
</tbody>
</table>
}

@code {
[Parameter]
public int id { get; set; }
private Origin origin = new();
private List<Essence> essences = new();
protected async override Task OnInitializedAsync()
{
var result = await http.GetFromJsonAsync<Origin>($"/api/origin/{id}");
if(result != null)
{
origin = result;
essences = result.EssenceIncreaseOptions;
}
}
}

现在，如果我删除foreach循环(以及我想要的本质信息(，那么代码在100%的时间内都能工作。因此，foreach循环有一些东西导致它在20%的时间内失败，但我只是不确定是什么。如有任何帮助，我们将不胜感激。提前谢谢。

Answer 1

在发布的代码中，foreach(var stat ...)中唯一可以产生NRE的点是<td>@stat</td>

因此，您的Essence类可能有一个override ToString()，它会导致null取消引用。

Answer 2

您可以做的是在@foreach循环之前进行条件检查，当essences为空时，显示一些消息，说明加载等，也可以在数据提取完成后放入StateHasChanged()。

@if(essences.Count>0)
{
@foreach(var stat in @essences)
{
<tr>
<td>Essence Increase Option: </td>
<td>@stat</td>
</tr>
}
}
else {loading data}

和

protected async override Task OnInitializedAsync()
{
var result = await http.GetFromJsonAsync<Origin>($"/api/origin/{id}");
if(result != null)
{
origin = result;
essences = result.EssenceIncreaseOptions;
StateHasChanged();
}
}