Blazor component is initialized, but not visible?

Question

I am working a bit with blazor right now and got to a pretty weird fault. So, I´ve got a parent component, which is having a child component and this is having a child component itself, both giving an Object to the child component. Something like that:

Parent.razor

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

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

and

Childcomponent.razor

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

So far, so good. Now, there is the interesting thing happening. The Parent and the Childcomponent are both being initialized straight at loading the page. The MyOwnChild-Component can only be loaded after converting some stuff, which happens in the onInitialized()-method of Childcomponent.razor. I checked, if the conversion is working and in fact the MyOwnChild-component is being initialized (which I checked via logging), but it´s not visible. I tried to use a testComponent, just containing a -Tag with some content, but it´s also not displayed. Also checked the html, that´s generated for hidden-divs, either due to css or due to a missassigned hidden attribute, but nothing like that is found. It´s pretty weird. What´s probably important to know is, that the MyOwnChild is using itself recursive if obj is expanded, but this is false by default. Additionally it is bound in a bigger context, so the ChildComponent.razor is actually containing two foreach-loops, one with the converted stuff, one with another list, that´s only getting items added on user interaction:

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

So while the upper version on the MyOwnChild.razor is not displayed at any time at all, though initialized, there´s no problem with it being displayed after adding a new item to the otherList. The inheritance is as follows:

Item:DetailedObject:Object

But I don´t think that´s the problem, cause the extension DetailedObject is only having a additional attribute content, which is not used at all here.

Thanks for help. :)

Several details are missing. Try to recreate in a new project, post all the changes needed. See minimal reproducible example — Henk Holterman
– Henk Holterman, Commented Jan 21, 2020 at 16:46
Yes without knowing more about ObjectListConverted I cannot help. Where is it defined, inited and changed? — Daniel W.
– Daniel W., Commented Jan 22, 2020 at 9:56

Sarah Multitasker · Accepted Answer · 2020-01-24 08:18:51Z

So I fixed the issue myself now. It was pretty tricky. So the problem was as follows: The ObjectlistConverted in the ChildComponent is a parameter, cause it is planned to be bound to a parents list. At the state of the error it was not bound yet. So OnInitialization of the ChildComponent the Parent is giving the empty list to it to prevent the ModelListConverted of being null. As the OnInitialized-method calls the conversion method it changes the ModelListConverted to another reference. Cause it is not bound to the parent, the parent is still holding the old list not updating the reference. When base.StateHasChanged()is called everything is rerendered. The parent sees, that the reference of the childcomponent is not the actual one anymore and gives it the old reference a second time. Cause it is only rerendered and not initialized again, it is not converting the list a second time, preventing the program from throwing a stack overflow error or getting into an endless loop. It´s just taking the empty list now, so right after initializing the MyOwnChild-component it removes it again, cause there´s no item in the list for it anymore.

Collectives™ on Stack Overflow

Blazor component is initialized, but not visible?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related