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();
    }
}

我已经阅读了 Stateful reconnection after prerendering 部分，但它似乎对我不起作用。

Answer 1

不要覆盖 OnInitialized 使用 OnAfterRender 或 OnAfterRenderAsync

<块引用>

protected override async Task OnAfterRenderAsync(bool firstRender)

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

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

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

编辑

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

Answer 2

结果是在我添加到列表的进一步下游服务中，我并没有创建一个空列表。

感谢您的帮助。

Blazor 两次渲染内容

2 个答案: