我一直在与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 calls your OnInitAsync method and renders your page first time immediately after first suspension (await). Then it renders your page again when your method finishes.
有两种解决方案。第一个是确保渲染代码可以处理Model为null的情况。因此,代替:
<div>@Model.Attribute</div>
用:
<div>@Model?.Attribute</div>
这将生成一个空的div,或者
@if (Model != null)
{
<div>@Model.Attribute</div>
}
这根本不会生成div。
其他更简单的解决方案是确保Model永远不会为null:
protected DataModel Model { get; } = new DataModel();
最初,我在Blazor的GitHub上提出了一个问题,从那里我几乎逐字复制了答案:https://github.com/aspnet/Blazor/issues/1703
社区中非常乐于助人的成员很快指出了问题所在,所有荣誉归功于他们。我只是想通过将知识带到StackOverflow来帮助其他人。
关于blazor - 如何在Blazor中异步加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53401935/