Компоненты Blazor: данные исчезают и загружаются снова через 4 секунды - PullRequest
Новая
       3

Компоненты Blazor: данные исчезают и загружаются снова через 4 секунды

1 голос
/ 21 января 2020

Это компонент меню, который находится в MainLayout. Теги H5 появляются и исчезают в мгновение ока, а затем через 4 секунды. Он загружается снова. Кто-нибудь сталкивался с такой же проблемой? 

<ul class="nav-title">
    <li class="brands">
        <div class="menu-dropdown sb-2">
          @foreach (var brand in Brands)
          {
            <div class="nav-column">
                <h5>@brand.Header</h5>
                <ul>
                  @foreach (var item in brand.Items)
                  {
                    <li>@item.Id</li>
                  }
                </ul>
            </div>
          }
       </div>
    </li>
</ul>

@code {
    private List<BrandModel> Brands { get; set; } = new List<BrandModel>();

    private List<CategoryModel> Categories { get; set; } = new List<CategoryModel>();

    private List<ColorModel> Colors { get; set; } = new List<ColorModel>();

    protected override async Task OnInitializedAsync()
    {
        Brands = await HeaderNavComponentService.GetBrandAsync();
        Categories = await HeaderNavComponentService.GetCategoryAsync();
        Colors = await HeaderNavComponentService.GetColorAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("lazyLoadNav");
        }
    }
}

Обновление ответа @ enet:

render-mode = "Server" прекращает мигание и задержка остается.

Я действительно хочу загрузить данные настолько быстро, насколько это возможно. Скорость prerender - это именно то, что я хочу. В этот миг, он также имеет значение, полученное из службы. Мне просто не нравится та часть, которая исчезает и загружается обратно через некоторое время, когда ни одна строка кода не сообщает приложению о таком поведении.

При возникновении этой проблемы, я предполагаю, что любые динамические c компоненты будут иметь минимальное время простоя (2 секунды + время загрузки данных) из-за отсутствия данных.

Это действительно печально, UX, хотя приходится ждать некоторое время, чтобы иметь возможность просматривать список навигации. Кажется, мой план по использованию Blazor для нового проекта нарушен: (

Обновление ответа Хенка:

Действительно не имеет смысла для меня ставить StateHasChange () после каждого назначенная переменная могла бы помочь, но это помогло. Но все еще есть мерцание.

Затем я изменяю render-mode = "Server", и в результате ожидается поведение, которое больше не мерцает, данные быстро связываются с пользовательским интерфейсом.

Так что я думаю, что что бы вы ни делали, OnInitialize будет запускаться дважды, просто он не будет привязываться к пользовательскому интерфейсу на этапе предварительного рендеринга, если режим рендеринга установлен на сервере.

Ответы [ 2 ]

1 голос
/ 21 января 2020

Вам иногда нужно помочь: 

protected override async Task OnInitializedAsync()
{
    Brands = await HeaderNavComponentService.GetBrandAsync();
    StateHasChanged();
    Categories = await HeaderNavComponentService.GetCategoryAsync();
    StateHasChanged();
    Colors = await HeaderNavComponentService.GetColorAsync();
}

, и эти методы Get ___ Asyn c () должны быть действительно асин c.

1 голос
/ 21 января 2020

Это странное поведение и может быть ошибкой. Мне удалось воспроизвести его с помощью простого кода ниже: 

@page "/"

<p>Hello world</p>

@if (strings != null)
{
   @foreach (var str in strings)
   {
      <p>@str</p>
 }
}
@code{

   public List<string> strings { get; set; } = null;

   protected override async Task OnInitializedAsync()
   {

       await Task.Delay(4000);

       strings = new List<string>() { "Apple", "Orange", "Banana" };
   }

}

Насколько я понимаю, код должен работать так:

  1. OnInitializedAsyn c метод начинает выполнение

  2. Обнаружение ожидаемого вызова метода (await Task.Delay(4000);), результатом которого является передача управления вызывающему коду.

  3. Blazor начинает рендеринг или вывод пользовательского интерфейса. Сначала рендеринг Html разметки <p>Hello world</p>

  4. Затем перерыв из-за @if (strings != null), но Blazor бесстыдно игнорирует мою команду, вводит l oop и начинает рендеринг теги p со значениями, которые еще не получены ... обратите внимание, они должны быть получены только через 4 секунды.

  5. Сразу же после рендеринга тегов p со значениями из массива строк, Blazor повторно выполнит рендеринг, на этот раз только <p>Hello world</p>, подождите 4 секунды и затем повторно выполнит рендеринг еще раз, на этот раз <p>Hello world</p> плюс теги p со значениями из массива строк

Очень странно, действительно ... о, подождите ... Я понял проблему ... Это Поведение является результатом установки атрибута режима рендеринга компонента Tag Helper равным «ServerPrerendered» . Сделайте это, и это поведение исчезнет. 

<app>
    <component type="typeof(App)" render-mode="Server" />
 </app>

Надеюсь, это поможет ...

...