Estoy usando Blazor WASM y .Net 5.
Tengo una estructura de datos jerárquica de una profundidad desconocida. Cuando se carga mi componente, muestro el primer nivel de la estructura de datos. Cuando un usuario hace clic en uno de los elementos, debe cargar el siguiente nivel después de cargar los datos de una llamada API. Luego, puede continuar haciendo clic hasta que no haya más niveles.
Pensé que podría hacerlo con un componente de autorreferencia, pero obtengo lo que parece ser un bucle recursivo infinito. Digo eso porque cuando ejecuto la aplicación y hago clic en algo de la lista inicial, la aplicación se congela.
Un "Blade" es solo un marcado HTML con algunas devoluciones de llamada de eventos y una propiedad "visible". un "ForEach" es un iterador de componentes. No debería ser crítico sobre cómo funcionan esos
El componente es "ChildResourceList" y, como puede ver, tiene una referencia a sí mismo.
La pregunta es... ¿cómo consigues que esa ChildResourceList anidada se renderice bajo demanda? ¿Hay algún enfoque diferente que pueda tomar sin tener que crear cosas como GrandChildResouceList, GreatGrandchildResourceList, etc.
@inject IHttpClientFactory factory; <Blade Visible="Visible" OnCloseButtonClick="OnClose" Title="@SelectedItem?.ResourceName"> <ForEach Context="r" Items="ResourceList"> <div @onclick="(() => SetChildItem(r.Item))"> @r.Item.ResourceName </div> </ForEach> </Blade> <ChildResourceList SelectedItem="ChildSelectedItem" Visible="ChildVisible"></ChildResourceList> @code { [Parameter] public EventCallback OnClose { get; set; } [Parameter] public bool Visible { get; set; } [Parameter] public Resource SelectedItem { get; set; } Resource ChildSelectedItem { get; set; } bool ChildVisible { get; set; } List<Resource> ResourceList { get; set; } = new(); protected override async Task OnParametersSetAsync() { if (SelectedItem != null) ResourceList = await GetResources(); } async Task<List<Resource>> GetResources() { HttpClient client = factory.CreateClient(name: "api"); return await client.GetFromJsonAsync<List<Resource>>($"{Endpoints.Features.ResourceExplorer.GetChildResources}/{SelectedItem.ResourceUID.ToString()}"); } void SetChildItem(Resource item) { ChildSelectedItem = item; ChildVisible = true; } void OnChildClose() { ChildVisible = false; ChildSelectedItem = null; } }Parece una recursividad infinita en la sección de marcado. Su componente ahora siempre tendrá una sección secundaria. Necesitas un @if() alrededor de la recursividad:
@if (ChildSelectedItem != null) { <ChildResourceList SelectedItem="ChildSelectedItem" Visible="ChildVisible"></ChildResourceList> } Pasa ChildVisible a Blade ( <Blade Visible="Visible" ) pero la lista anidada está fuera de Blade.