Blazor：组件重新渲染后调用 OnInitialized

Question

我和我的同事面临这样的问题：当调用根组件的 StateHasChanged 时，会重新创建 blazor 组件（我们称之为 View）。因此，此时 View 的 OnInitialized 方法被执行。如果我理解正确的话，OnInitialized 方法仅在首次创建组件时执行一次。但是我们的 View 组件已经创建了，并且存储在堆栈类型的私有字段中。

.razor 文件中的代码（根组件）：

@foreach (var rec in _navStack)
{
    <div class = "viewport" style = "height : calc(100vh - 104px)">
        <div @key="rec.Id" class="h-100 @(rec == _navStack.Peek() ? "d-block" : "d-none")">
            @rec.Fragment
        </div>
    </div>
}

问题View存储在_navStack中。当用户单击某个按钮时，将调用根组件的 StateHasChanged 方法，然后执行 foreach 块。而当rec.Fragment(View)渲染时，View的OnInitialized方法就会被执行。这种情况会导致一些需要更多细节的问题，但现在并不重要。

有趣的事实 - 如果我们将

块移到 foreach 块之外，一切都会正常工作！

<div class = "viewport" style = "height : calc(100vh - 104px)">
@foreach (var rec in _navStack)
{
    <div @key="rec.Id" class="h-100 @(rec == _navStack.Peek() ? "d-block" : "d-none")">
        @rec.Fragment
    </div>
}
</div>

CSS样式：

.viewport {
    min-height: 100%;
    padding: 0 10px;
    overflow: clip;
}
.d-block {
  display: block !important;
}
.d-none {
  display: none !important;
}

有什么猜测吗？

如果没有最小的工作示例来证明这个问题可能无法回答。

事实：

OnInitialized{Async}

在组件的生命周期中仅运行一次[除非您手动调用它]。

因此，在代码中的某个位置，您正在重新创建组件。

您可以这样做来提供它：

@code {
    private Guid _componentId = Guid.NewGuid();

    // CTOR
    public Home()
    {
        Console.WriteLine($"Someone Createe me.  My Id is: {_componentId}");
    }

    protected override void OnInitialized()
    {
        Console.WriteLine($"OnInitialized called on ComponentId: {_componentId}");
    }
}

如何解决它：如果没有最小的工作示例，就不知道。

Answer 1

如果没有最小的工作示例来证明这个问题可能无法回答。

事实：

OnInitialized{Async}

在组件的生命周期中仅运行一次[除非您手动调用它]。

因此，在代码中的某个位置，您正在重新创建组件。

您可以这样做来提供它：

@code {
    private Guid _componentId = Guid.NewGuid();

    // CTOR
    public Home()
    {
        Console.WriteLine($"Someone Createe me.  My Id is: {_componentId}");
    }

    protected override void OnInitialized()
    {
        Console.WriteLine($"OnInitialized called on ComponentId: {_componentId}");
    }
}

如何解决它：如果没有最小的工作示例，就不知道。