Início / coding / Perguntas / 79565943
Accepted
Ivan Debono
Asked: 2025-04-10 15:03:26 +0800 CST

Por que o componente filho é renderizado durante a renderização do componente pai?

  • 772

Eu tenho este componente pai:

<CascadingValue Value="@Email" IsFixed="true">
    <Header />

    <div class="container-fluid">
        @Body
    </div>
</CascadingValue>

@code {
    [Parameter]
    public string Email { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (!firstRender)
            return;

        Email = await GetEmailFromLocalStorage();
    }
}

E o componente de cabeçalho (simplificado) é:

<Details></Details>

E o componente de detalhes (neto do pai):

@code {
    [CascadingParameter]
    public string Email { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (!firstRender)
            return;

        var email = Email; //Testing
    }
}

Em tempo de execução, o componente pai começa a renderizar, mas então o neto começa a renderizar e o parâmetro 'Email' é nulo.

Por que isso acontece e a prática acima não é uma prática recomendada para passar parâmetros para componentes filhos?

c#

1 respostas

  1. Best Answer

    Por que isso acontece

    OnAfterRenderAsyncfaz o que promete. É executado como um evento de interface do usuário após a renderização do componente. Portanto, qualquer alteração de estado que você fizer não será refletida no estado de exibição sem uma nova renderização.

    o acima exposto não é a melhor prática

    Não existe "boa prática": existem apenas práticas boas e ruins. Tudo depende do contexto.

    Você faz isso:

    [Parameter] public string Email { get; set; }

    e então

            Email = await GetEmailFromLocalStorage();

    O que é uma prática muito ruim. Você não deve sobrescrever Parameterpropriedades definidas dentro do componente. Consulte https://learn.microsoft.com/en-us/aspnet/core/blazor/components/overwriting-parameters?view=aspnetcore-9.0 para obter uma explicação detalhada do porquê.

    A implementação a seguir deve funcionar no caso de uso que você forneceu. Ela usa um TaskCompletionSourcepara fornecer uma tarefa gerenciada manualmente. É basicamente um exemplo do que Brian Parker sugere.

    Primeiro, use "Layout" para representar sua página pai. Observe que estamos colocando um Task<string>.

    @inherits LayoutComponentBase

<CascadingValue Name="GetEmail" Value="GetEmailTask">

    <div class="page">
        <div class="sidebar">
            <NavMenu />
        </div>

        <main>
            <div class="top-row px-4">
                <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
            </div>

            <article class="content px-4">
                @Body
            </article>
        </main>
    </div>

    <div id="blazor-error-ui" data-nosnippet>
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>

</CascadingValue>

@code {
    // Cascaded value that provides the email task from the TaskCompletionSource.
    private Task<string> GetEmailTask => _taskCompletion.Task;

    // TaskCompletionSource to manage the task
    // Initial state is an incomplete task
    private TaskCompletionSource<string> _taskCompletion = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Simulate some async work to get the email
            await Task.Yield();
            // Complete the task with the result
            _taskCompletion.SetResult($"Email at {DateTime.Now.ToLongTimeString()}");
        }
    }
}

    E seu Details:

    <h3>Details: @Email </h3>

@code {
    [CascadingParameter(Name = "GetEmail")] private Task<string>? GetEmailTask { get; set; }

    private string Email = "Not Set";

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        // Check if this is the first render
        if (firstRender)
        {
            // Ensure the task is not null before awaiting
            ArgumentNullException.ThrowIfNull(GetEmailTask);
            // Await the task to get the email
            Email = await GetEmailTask;
            // Trigger a re-render
            StateHasChanged();
        }
    }
}

    Página de demonstração:

    @page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Details />
    • 1

relate perguntas