onOnAfterRenderAsync之后未更新Blazor UI

Question

我有一个Blazor服务器端页面，当用户转到该页面时，该页面需要加载数据。然而，在OnAfterRenderAsync执行之后，它不更新UI。数据被正确地加载，并且如果我创建一个"；刷新"；按钮来标记其工作的页面。

我有这样的东西：

@page "/mypage
<button class="btn btn-primary" @onclick="Temp">Refresh</button>
@if (_loading)
{
<p>
<em>Loading...</em>
</p>
}
else
{
<p>
<em>Here is your data</em>
</p>
}
@code {
private bool _loading { get; set; }

protected override async Task OnInitializedAsync()
{
_loading = true;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender) return;
//Amazong loading code
_loading = false;
}
private void Temp()
{
_loading = false;
}
}

步进通过OnAfterRenderAsync确实表明_loading被正确地设置为false。步进通过Temp()确实表明_loading被设置为false。

我猜测OnAfterRenderAsync没有更新DOM，事实上单击按钮会强制更新DOM。

Answer 1

首先，您应该在OnInitialized(Async(对中加载数据。如果将代码放置在OnAfterRender(Async(对中，以更改组件的状态，例如：_loading = false;，则应手动调用StateHasChanged方法，该方法会通知组件其状态已更改，并且应重新渲染。

and if I create a "refresh" button to flag the page it works.

它重新渲染并不是因为你"；标记页面"；。。。在Blazor中，UI事件(如单击事件(会自动调用StateHasChanged方法。当Blazor处于开发的第一阶段时，我们不得不手动调用StateHasChanged方法。

Answer 2

我的方法是使用OnInitialized事件。

例如，如果你正在加载一个类别列表，你可以在剃刀标记中应用以下测试条件：

@if (categories == null && _loadFailed)
{
<h1 class="text-danger">The data has failed to load please try again in a little bit..</h1>
}
else if (categories == null)
{
<h1 class="text-success">Loading...</h1>
<div style="display:normal;margin:auto" class="loader"></div>
}
else if (categories.Count == 0)
{
<text>No categories found</text>
}
else...