Blazor组件：4秒后数据消失并重新加载

这是放置在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>

@foreach（品牌中的var品牌）
{
@商标.标题

@foreach（品牌项目中的var项目）
{
@项目Id
}

}

@code{
私有列表品牌{get；set；}=new List（）；
私有列表类别{get；set；}=new List（）；
私有列表颜色{get；set；}=new List（）；
受保护的重写异步任务OnInitializedAsync（）
{
Brands=await HeaderNavComponentService.GetBrandAsync（）；
Categories=await HeaderNavComponentService.getCategorityAsync（）；
Colors=wait HeaderNavComponentService.GetColorAsync（）；
}
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
if（firstRender）
{
等待JS.InvokeVoidAsync（“lazyLoadNav”）；
}
}
}

更新@enet的答案：

render mode=“Server”将停止闪烁，并保留延迟

实际上，我希望尽可能快地加载数据。预渲染速度正是我想要的。在该闪烁中，它还具有从服务检索到的值。我只是不喜欢它消失的部分，在没有任何代码告诉应用程序做出这样的行为之后，它会重新加载

这个问题发生的方式，我预测任何动态组件都会有一个最小的死区时间（2秒+数据加载时间），因为没有数据

虽然不得不等待一段时间才能查看导航列表，但这确实令人难过。看来我在新项目中使用Blazor的计划被打破了：(

更新Henk的答案：

对我来说，在每个指定的变量之后放置StateHasChange（）确实没有意义，但它确实起到了作用。但仍然有闪烁

然后我更改render mode=“Server”，结果是预期行为不再闪烁，数据将快速绑定到UI

---

所以我认为无论你做什么，OnInitialize都会运行两次，只是如果将渲染模式置于服务器上，它不会在预渲染阶段绑定到UI。

这是一个奇怪的行为，可能是一个bug。我用下面的简单代码成功地复制了它：

@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" };
   }

}

---

希望这能有所帮助……

您有时需要帮助：

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

---

而那些是异步的方法必须是真正异步的。

我的理论是组件被破坏并再次初始化，第二次，它做了一些事情，大约需要2-3秒，然后最终去检索数据。这可以解释为什么h5标记已经显示了从服务检索到的数据，然后就消失了。它被调用了两次，因为有两个呈现而不是一个，它是c一致。这里没有什么神奇的事情发生。服务器预渲染应用程序（通过我们称之为“静态预渲染器”，然后将其拆除。然后客户端应用程序启动并再次渲染原始应用程序（因此2次渲染2次调用）。在预渲染+重新连接情况下（原始服务器端示例）我们延迟调用onafterrender，直到我们与服务器建立了连接，以提供类似于未预渲染情况下的体验。上述来源：您是否按照我在回答中显示的方式尝试了组件Html标记？它解决了您的问题吗？我更新了我的问题。render mode=“server”剪切第一个渲染，但第二个渲染仍会花费太多时间来检索数据。

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

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