Evitar sobrescribir parámetros en ASP.NET Core Blazor

Por Robert Haken

En este artículo se explica cómo evitar sobrescribir parámetros en Blazor aplicaciones durante la renderización.

Parámetros sobrescritos

El marco Blazor impone con carácter general una asignación de parámetro de componentes primarios a secundarios segura:

• Los parámetros no se sobrescriben de forma inesperada.
• Los efectos secundarios se minimizan. Por ejemplo, se evitan representaciones adicionales, ya que pueden crear bucles de representación infinitos.

Un componente secundario recibe nuevos valores de parámetro que posiblemente sobrescriban los valores existentes cuando el componente primario vuelva a representarse. Sobrescribir valores de parámetro en un componente secundario de forma accidental suele producirse al desarrollar el componente con uno o varios parámetros enlazados a datos y cuando el desarrollador escribe directamente en un parámetro del elemento secundario:

• El componente secundario se representa con uno o varios valores de parámetro del componente primario.
• El elemento secundario escribe directamente en el valor de un parámetro.
• El componente primario vuelve a representar el valor del parámetro del elemento secundario y lo sobrescribe.

La posibilidad de sobrescribir valores de parámetro se extiende también a los descriptores de acceso set de propiedades del componente secundario.

Importante

Nuestra orientación general es no crear componentes que escriban directamente en sus propios parámetros después de que el componente se represente por primera vez.

Considera el componente ShowMoreExpander siguiente que:

• Representa el título.
• Muestra el contenido secundario cuando se selecciona.
• Permite establecer el estado inicial con un parámetro de componente (InitiallyExpanded).

Después de que el componente ShowMoreExpander siguiente muestre un parámetro anulado, se muestra un componente ShowMoreExpander modificado para mostrar el método correcto en este escenario. Los ejemplos siguientes se pueden colocar en una aplicación de ejemplo local para experimentar los comportamientos descritos.

ShowMoreExpander.razor:

<div @onclick="ShowMore" class="card bg-light mb-3" style="width:30rem">
    <div class="card-header">
        <h2 class="card-title">Show more (<code>Expanded</code> = @InitiallyExpanded)</h2>
    </div>
    @if (InitiallyExpanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    [Parameter]
    public bool InitiallyExpanded { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private void ShowMore() => InitiallyExpanded = true;
}

El componente ShowMoreExpander se agrega al siguiente componente primario Expanders que podría llamar a StateHasChanged:

• Al llamar a StateHasChanged en el código de desarrollador se notifica a un componente que su estado ha cambiado y normalmente desencadena la repetición de la representación del componente para actualizar la interfaz de usuario. StateHasChanged se trata detalladamente más adelante en Ciclo de vida de los componentes de Razor y Representación de componentes de Razor de ASP.NET Core.
• El atributo de directiva @onclick del botón asocia un controlador de eventos al evento onclick del botón. El control de eventos se trata detalladamente más adelante en Control de eventos de Blazor en ASP.NET Core.

Expanders.razor:

@page "/expanders"

<PageTitle>Expanders</PageTitle>

<h1>Expanders Example</h1>

<ShowMoreExpander InitiallyExpanded="false">
    Expander 1 content
</ShowMoreExpander>

<ShowMoreExpander InitiallyExpanded="false" />

<button @onclick="StateHasChanged">Call StateHasChanged</button>

Al principio, los componentes ShowMoreExpander se comportan de manera independiente cuando se establecen sus propiedades de InitiallyExpanded. Los componentes secundarios mantienen sus estados según lo previsto.

Si se llama a StateHasChanged en un componente primario, el marco Blazor vuelve a representar los componentes secundarios si existe la posibilidad de que sus parámetros hayan cambiado:

• Para un grupo de tipos de parámetros que Blazor comprueba explícitamente, Blazor vuelve a representar un componente secundario si detecta que alguno de los parámetros ha cambiado.
• En el caso de los tipos de parámetros no comprobados, Blazor vuelve a representar el componente secundario independientemente de si los parámetros han cambiado o no. El contenido secundario se encuentra en esta categoría de tipos de parámetros porque es de tipo RenderFragment, que es un delegado que hace referencia a otros objetos mutables.

Para el componente Expanders:

• El primer componente ShowMoreExpander establece el contenido secundario de un objeto potencialmente mutable RenderFragment, por lo que una llamada a StateHasChanged en el componente primario vuelve a representar automáticamente el componente y, posiblemente, sobrescribe el valor de InitiallyExpanded en su valor inicial de false.
• El segundo componente ShowMoreExpander no establece el contenido secundario. Por lo tanto, no existe un objeto RenderFragment potencialmente mutable. Una llamada a StateHasChanged en el componente primario no vuelve a representar automáticamente el componente secundario, por lo que el valor de InitiallyExpanded del componente no se sobrescribe.

Para mantener el estado en el escenario anterior, usa un campo privado en el componente ShowMoreExpander para mantener su estado.

El siguiente componente ShowMoreExpander revisado:

• Acepta el valor del parámetro de componente InitiallyExpanded del componente principal.
• Asigna el valor del parámetro de componente a un campo privado (expanded) en el evento OnInitialized.
• Usa el campo privado para mantener su estado de alternancia interno, que muestra cómo evitar escribir directamente en un parámetro.

Nota

Los consejos de esta sección se aplican a una lógica similar en los descriptores de acceso set de parámetros de componente, lo que puede dar lugar a efectos secundarios no deseados similares.

ShowMoreExpander.razor:

<div @onclick="Expand" class="card bg-light mb-3" style="width:30rem">
    <div class="card-header">
        <h2 class="card-title">Show more (<code>Expanded</code> = @expanded)</h2>
    </div>
    @if (expanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    private bool expanded;

    [Parameter]
    public bool InitiallyExpanded { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    protected override void OnInitialized() => expanded = InitiallyExpanded;

    private void Expand() => expanded = true;
}

Nota:

El ShowMoreExpander revisado no refleja los cambios realizados en el parámetro InitiallyExpanded después de la inicialización (OnInitialized). En determinados escenarios, un componente ya inicializado podría recibir nuevos valores de parámetro. Esto puede ocurrir, por ejemplo, en una vista primaria-subordinada en la que se usa el mismo componente para representar vistas de detalle diferentes o cuando el parámetro de ruta de /item/{id} cambia para mostrar un elemento diferente.

Considera la posibilidad de seguir un componente ToggleExpander que:

• Permite cambiar el estado desde dentro y fuera.
• Controla los nuevos valores de parámetro incluso si se reutiliza la misma instancia de componente.

ToggleExpander.razor:

<div class="card bg-light mb-3" style="width:30rem">
    <div @onclick="Toggle" class="card-header">
        <h2 class="card-title">Toggle (<code>Expanded</code> = @expanded)</h2>
    </div>
    @if (expanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

    [Parameter]
    public EventCallback<bool> ExpandedChanged { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private bool expanded;

    protected override void OnParametersSet() => expanded = Expanded;

    private async void Toggle()
    {
        expanded = !expanded;
        await ExpandedChanged.InvokeAsync(expanded);
    }
}

El componente ToggleExpander debe usarse con la sintaxis de enlace @bind-Expanded="{field}", lo que permite la sincronización bidireccional del parámetro.

ExpandersToggle.razor:

@page "/expanders-toggle"

<PageTitle>Expanders Toggle</PageTitle>

<h1>Expanders Toggle</h1>

<ToggleExpander @bind-Expanded="expanded">
    Expander content
</ToggleExpander>

<button @onclick="Toggle">Toggle</button>

<button @onclick="StateHasChanged">Call StateHasChanged</button>

@code {
    private bool expanded;

    private void Toggle() => expanded = !expanded;
}

Para obtener más información acerca del enlace de elementos primarios y secundarios, consulta los siguientes recursos:

• Enlace con parámetros de componente
• Enlace entre más de dos componentes
• Blazor Error de enlace bidireccional (dotnet/aspnetcore #24599)

Para obtener más información sobre la detección de cambios, junto con los tipos exactos que Blazor comprueba, consulta Representación de componentes de ASP.NET Core Razor.