时间戳

首页 > 解决方案 > 如何在 Blazor 中异步加载数据

blazor - 如何在 Blazor 中异步加载数据

问题描述

我一直在玩 Blazor 并尝试构建一个简单的应用程序。我尝试做的第一件事是异步加载数据（在我的例子中来自 LocalStorage）。

protected override async Task OnInitAsync()
{
    await Log.Log($"{nameof(IndexComponent)}.{nameof(OnInitAsync)}");
    Model = await LocalStorage.GetItem<DataModel>("model");
}

我的渲染代码如下所示： 

<div>@Model.Attribute</div>

我在呈现页面时收到 NullReferenceException，而且浏览器进入无响应状态，此时我所能做的就是关闭浏览器选项卡并重新启动 Blazor 应用程序。

尽管事实证明这种行为是设计使然，但我没有在任何文档中找到它的解释，而且我认为在这里授予共享是出乎意料的。希望它会对其他人有所帮助（请参阅下面我自己的答案）。

标签： blazor

解决方案

这一切都归结为：

Blazor 调用您的 OnInitAsync 方法并在第一次暂停（等待）后立即第一次呈现您的页面。然后，当您的方法完成时，它会再次呈现您的页面。

有两种解决方案。第一个是确保您的渲染代码处理 Model 为空的情况。所以，而不是：

<div>@Model.Attribute</div>

利用：

<div>@Model?.Attribute</div>

这将生成一个空的 div，或者

@if (Model != null)
{
    <div>@Model.Attribute</div>
}

它根本不会生成 div。

另一个更简单的解决方案是确保 Model 永远不会为空：

protected DataModel Model { get; } = new DataModel();

最初我在 Blazor 的 GitHub 中提出了一个问题，我几乎逐字复制了答案：https ://github.com/aspnet/Blazor/issues/1703

非常乐于助人的社区成员很快就指出了问题所在，所有的功劳都归于他们。我只是想通过将知识带到 StackOverflow 来帮助其他人。

推荐阅读