应该如何在Blazor中异步加载数据

Question

我一直在玩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应用程序。

尽管事实证明这种行为是故意的，但我没有在任何文档中发现它的解释，我认为在这里允许共享已经足够出乎意料了。希望它能帮助其他人(见下面我自己的答案(。

Answer 1

这一切归结为：

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

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

<div>@Model.Attribute</div>

用途：

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

它将生成一个空的div或

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

它根本不生成div。

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

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

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

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