在 onOnAfterRenderAsync 之后未更新 Blazor UI答案

【问题标题】：Blazor UI not being updated after onOnAfterRenderAsync在 onOnAfterRenderAsync 之后未更新 Blazor UI
【发布时间】：2020-11-06 15:57:01
【问题描述】：

我有一个 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。

【问题讨论】：

标签： blazor blazor-server-side

【解决方案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 方法。

【讨论】：

【解决方案2】：

我会这样做的方式是使用 OnInitialized 事件。

例如，如果您正在加载类别列表，您可以在 razor 标记中应用以下测试条件：

@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...

【讨论】：

我遇到的问题是将负载放在 OnInitialized 中，导致页面无法加载