Как данные должны загружаться асинхронно в 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>
}

Другое и более простое решение - убедиться, что модель никогда не равна нулю:

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

Первоначально я поднял проблему в GitHub Blazor, откуда я почти дословно скопировал ответ: https://github.com/aspnet/Blazor/issues/1703

Очень полезные члены сообщества очень быстро указали, в чем была проблема, и вся заслуга им.Я просто пытаюсь помочь другим людям, перенося знания в StackOverflow.