Estou usando Blazor WASM e .Net 5.
Eu tenho uma estrutura de dados hierárquica de uma profundidade desconhecida. Quando meu componente é carregado, mostro o primeiro nível da estrutura de dados. Quando um usuário clica em um dos itens, ele deve carregar o próximo nível após carregar os dados de uma chamada de API. Em seguida, você pode continuar a clicar até que não haja mais níveis.
Achei que poderia fazer isso com um componente de autorreferência, mas estou obtendo o que parece ser um loop recursivo infinito. Digo isso porque quando executo o aplicativo e clico em algo da lista inicial, o aplicativo congela.
Um "Blade" é apenas uma marcação HTML com alguns retornos de chamada de evento e uma propriedade "visible". um "ForEach" é um iterador de componente. Não deve ser crítico sobre como funcionam
O componente é "ChildResourceList" e como você pode ver, ele tem uma referência a si mesmo.
A questão é ... como você faz com que ChildResourceList aninhado seja renderizado sob demanda? Existe uma abordagem diferente que eu poderia adotar sem ter que criar coisas 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 recursão infinita na seção de marcação. Seu componente agora sempre terá uma seção Criança. Você precisa de um em @if()
torno da recursão:
@if (ChildSelectedItem != null)
{
<ChildResourceList SelectedItem="ChildSelectedItem" Visible="ChildVisible"></ChildResourceList>
}
Você passa ChildVisible para o Blade ( <Blade Visible="Visible"
), mas a lista aninhada está fora desse Blade.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras