Blazor渲染内容两次

Question

我已经尝试了不同的方法来防止这种情况的发生。

在更改为render-mode="Server"之后，我能够在第一次加载时防止渲染两次。

但是现在当我刷新页面时，它仍然是元素数量的两倍。

这是我得到的

<div id="component-wrapper" class="row">
@if (Items != null)
{
@foreach (var item in Items )
{
<ItemComponent Item="@item" />
}
}
</div>
@code {
[Inject]
private IItemService ItemService { get; set; }
List<ItemViewModel> Items { get; set; }
protected override async Task OnInitializedAsync()
{
Items = await ItemService.GetItemsAsync();
base.OnInitialized();
}
}

我已经阅读了预呈现部分后的有状态重连接，它似乎不适合我。

Answer 1

在Blazor服务器的情况下，修改_Host.cshtml为我解决了这个问题:

之前

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

后

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

Answer 2

对于我来说，这个脚本是在_Hosts.cshtml上复制的

<script src="_framework/blazor.server.js"></script>

删除其中一个后，问题就解决了。

Answer 3

在我添加到列表的进一步下游服务中，我一开始就没有创建空列表。

谢谢你的协助。

Answer 4

不要重写OnInitialized使用OnAfterRender或OnAfterRenderAsync

protected override async Task OnAfterRenderAsync(bool firstRender)

使用firstRender，您获得信息。你也可以使用我们自己的机制来避免多次加载你的上下文。

如果需要调用StateHasChanged来更新DOM。

https://learn.microsoft.com/en us/aspnet/core/blazor/components/lifecycle?view=aspnetcore - 5.0

编辑解决这个问题最简单的方法是使用浏览器本地存储。您可以保存用户id，然后在刷新时获取它。如果用户按F5刷新页面，blazor将创建一个新的电路，并且在服务器端没有简单的解决方案。