Componente recursivo de profundidade desconhecida

Kevon

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;
    }
   }
Henk Holterman

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.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Inverter Dicionário Aninhado de Profundidade Desconhecida

Lista de profundidade desconhecida em Go

C ++: gerar vetor multidimensional de profundidade desconhecida

Analisando matriz aninhada de profundidade desconhecida

Atravesse dinamicamente um objeto de chaves de profundidade desconhecida

Atravesse dinamicamente um objeto de chaves de profundidade desconhecida

Como "enrolar" um array de PHP de profundidade desconhecida?

Definir o valor de um dict aninhado de profundidade desconhecida?

Acessando o elemento no dicionário multinível de profundidade desconhecida

Seleções em cascata JS simples de profundidade desconhecida

PHP foreach loop em array multidimensional de profundidade desconhecida

Como atravessar completamente um dicionário complexo de profundidade desconhecida?

localização nginx com profundidade de subpasta desconhecida

Como construir recursivamente uma árvore de profundidade desconhecida em R

Removendo itens de uma matriz aninhada com profundidade desconhecida

Como criar hash recursivo de hash? (Com profundidade ilimitada)

Algoritmo recursivo para de funcionar após certa profundidade

Foreach recursivo de PHP com esquerda, direita e profundidade

Componente recursivo de digitação Vue

Mapeando totalmente o objeto de "profundidade" desconhecida (e a maneira mais eficiente de encontrar a "profundidade" de um objeto)

Como construir recursivamente o caminho de submatrizes dentro de uma matriz com profundidade desconhecida

Como projetar tabelas de banco de dados para dados hierárquicos com profundidade desconhecida?

Solução genérica para criar um objeto de profundidade desconhecida a partir de um array

Obtém o elemento dentro do objeto de JavaScript de profundidade desconhecida

Como remover campos vazios ou nenhum em um dicionário profundamente aninhado de profundidade desconhecida?

Mapas aninhados de profundidade desconhecida verificam a existência da chave e obtêm valor

Encontre netos de profundidade desconhecida específicos na cifra neo4j

ReadRenderTargetPixels do componente de profundidade em Three.js?

ReadRenderTargetPixels do componente de profundidade em Three.js?