Blazor OnAfterRenderAsync 混淆

Question

我理解这个想法，OnAfterRenderAsyc()但我不明白如何实现我想要的。我OnInitializedAsync()基本上从文件中获取摘要信息。之后，我想调用另外 2 个方法，并根据这 2 个方法返回的信息，我想将一些 HTML 添加到我的组件中。到目前为止，我有这个：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        driveFiles = await DriveService.GetList(true);
        permissionFiles = await DriveService.GetPermissions();

    }

    await base.OnAfterRenderAsync(firstRender);
}

然后我只想在OnAfterRenderAsync()发生后添加一些基本的 HTML，如下所示：

@foreach (var file in driveFiles.Select((value, index) => new {value, index}))
{
    <p>
        Name: @file.value.FileName
        <br />
        File Id: @file.value.FileId
        <br />
        File Number: @file.index 
    </p>
    <hr />
}

我怎么做？我在谷歌上找不到任何解释如何实际使用的内容OnAfterRenderAsync()，他们只是解释了其背后的基本思想。我确信我想太多了，但我无法弄清楚

Answer 1

当调用异步方法时，OnInitializedAsyncUI 会被渲染两次。await遇到第一个时一次，OnInitializedAsync完成时再一次。这使得组件能够在执行后台任务（例如从服务器检索数据）时呈现标记供用户查看。

您还可以在下面的 blazor 组件生命周期图表中看到此行为（来自 Microsoft 文档）。

在第一次渲染期间，如果您尝试显示数据，您将收到空引用异常，因为异步任务尚未完成。

解决方案是将您的 ui 代码包装在 if 语句中：

@if (driveFiles != null)
{
    @foreach (var file in driveFiles.Select((value, index) => new {value, index}))
    {
        <p>
            Name: @file.value.FileName
        <br />
            File Id: @file.value.FileId
        <br />
            File Number: @file.index 
        </p>
        <hr />
    }
}
else
{
    @* Show a loading indicator *@
    <p>Loading...</p>
}

对于您的场景，您实际上不需要使用OnAfterRenderAsync方法。

资料来源：

1. 微软文档
2. https://jonhilton.net/when-does-blazor-render-your-ui/
3. https://blazor-university.com/components/component-lifecycles/