Blazor 组件已初始化，但不可见？答案

【问题标题】：Blazor component is initialized, but not visible?Blazor 组件已初始化，但不可见？
【发布时间】：2020-05-07 09:17:48
【问题描述】：

我现在正在使用 blazor，但遇到了一个非常奇怪的错误。所以，我有一个父组件，它有一个子组件，它本身也有一个子组件，两者都给子组件一个对象。类似的东西：

Parent.razor

<ChildComponent @bind-Model="Model" ObjectListConverted="ObjectListConverted"/>

@code {
List<Object> ObjectListConverted = new List<Object>();
}

和

Childcomponent.razor

<MyOwnChild Item="@((Item)obj)"/>

到目前为止，一切都很好。现在，有趣的事情发生了。 Parent 和 Childcomponent 都在加载页面时直接初始化。 MyOwnChild-Component 只能在转换一些东西后才能加载，这发生在 Childcomponent.razor 的 onInitialized() 方法中。我检查了转换是否正常工作，实际上 MyOwnChild 组件正在初始化（我通过日志记录检查），但它不可见。我尝试使用一个 testComponent，它只包含一个带有一些内容的 -Tag，但它也没有显示。还检查了为隐藏 div 生成的 html，无论是由于 css 还是由于未分配的隐藏属性，但没有找到类似的东西。这很奇怪。重要的是要知道，如果 obj 被扩展，MyOwnChild 会使用自身递归，但默认情况下这是错误的。此外，它绑定在更大的上下文中，因此 ChildComponent.razor 实际上包含两个 foreach 循环，一个带有转换后的内容，一个带有另一个列表，这只会在用户交互时添加项目：

Childcomponent.razor

@foreach (Object obj in ObjectListConverted)
                {
                    if (obj.IsFolder) //This evaluates to true in all cases right now.
                    {
                        <MyOwnChild Item="@((Item)obj)"/>
                        Console.WriteLine("Hey, it´s a folder!"); //This is logged.
                    }
                }
                @if (Model.OtherList != null)
                {
                    @foreach (DetailedObject obj in Model.OtherList)
                    {
                        if (obj.IsFolder)
                        {
                           <MyOwnChild Item="@((Item)obj)"/>
                        }
                    }
                }

@code {
[Parameter]
List<Object> ObjectListConverted {get; set;}
[Parameter]
Model Model {get; set;} = new Model();

protected override void OnInitialized() {
ObjectListConverted = ConvertToStructuredList(Model.List);
base.StateHasChanged();
}
}

因此，虽然 MyOwnChild.razor 上的上层版本在任何时候都不会显示，尽管已初始化，但在将新项目添加到 otherList 后显示它没有问题。继承如下：

Item:DetailedObject:Object

但我不认为这是问题，因为扩展DetailedObject只有一个额外的属性内容，这里根本没有使用。

感谢您的帮助。 :)

【问题讨论】：

缺少一些细节。尝试在一个新项目中重新创建，发布所有需要的更改。见minimal reproducible example
是的，我不知道更多关于ObjectListConverted 的信息，我无能为力。它在哪里定义、启动和更改？

标签： razor initialization components blazor

【解决方案1】：

所以我现在自己解决了这个问题。这很棘手。所以问题如下： ChildComponent 中的 ObjectlistConverted 是一个参数，因为它计划绑定到父列表。在错误状态下，它尚未绑定。因此，父组件的 OnInitialization 将空列表提供给它，以防止 ModelListConverted 为空。当 OnInitialized 方法调用转换方法时，它会将 ModelListConverted 更改为另一个引用。因为它没有绑定到父级，父级仍然持有旧列表而不更新引用。当 base.StateHasChanged() 被调用时，一切都被重新渲染。父母看到，子组件的引用不再是实际的引用，并再次给它旧的引用。因为它只是重新渲染而没有再次初始化，它没有第二次转换列表，防止程序抛出堆栈溢出错误或进入无限循环。它现在只是获取空列表，因此在初始化 MyOwnChild 组件后它会再次将其删除，因为列表中不再有任何项目。

【讨论】：