如何在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>

使用：

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

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

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

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

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