这是一个放置在 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的答案：
渲染模式="服务器">切断了闪烁，并留下了延迟。
我实际上想尽可能快地加载数据。预渲染速度正是我想要的。在眨眼中，它还具有从服务中检索到的值。我只是不喜欢它消失并在一段时间后加载回来的部分，没有代码行告诉应用程序做出这样的行为。
这个问题发生的方式，我预测任何动态组件的最小死区时间为(2秒+数据加载时间(，因为没有数据。
这真的很可悲的用户体验，尽管必须等待一段时间才能查看导航列表。看来我使用Blazor进行新项目的计划被破坏了:(
亨克回答的更新：
对我来说，在每个赋值变量之后放置 StateHasChange(( 真的没有意义，但它确实有帮助。但仍然有闪烁。
然后我更改渲染模式="服务器"，结果是预期行为不再闪烁，数据快速绑定到 UI。
所以我认为无论你做什么，OnInitialize 都会运行两次，只是如果将渲染模式放入服务器，它不会在预渲染阶段绑定到 UI。
这是一种奇怪的行为，可能是一个错误。我已经成功地用下面的简单代码重现了它：
@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" };
}
}
据我了解，代码应该像这样工作：
方法开始执行
遇到等待的方法调用 (
await Task.Delay(4000);(，其结果是将控制权交给调用代码。Blazor 开始呈现或输出 UI。首先呈现 Html 标记
<p>Hello world</p>然后因为
@if (strings != null)而休息一下，但 Blazor 无耻地忽略了我的命令，进入循环，并开始渲染具有尚未检索的值的 p 标记......请注意，它们应该仅在 4 秒后检索。在使用字符串数组中的值呈现 p 标记后，Blazor 立即再次重新呈现，这次只有
<p>Hello world</p>，等待 4 秒，然后再次重新呈现，这次<p>Hello world</p>加上字符串数组中的值的 p 标记
确实很奇怪...哦等等...我明白了问题所在...此行为是将组件标记帮助程序的呈现模式属性设置为"服务器预呈现">的结果。这样做，这种行为就会消失。
<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();
}
而那些 Get___Async(( 方法需要真正异步。