Campi imprecisi in Blazor per ogni loop

Question

Ho un ciclo for-each nel mio componente e nel ciclo viene eseguito il rendering di un componente che ho creato. Viene passato un oggetto, quindi il componente inizializza i propri campi nella OnInitializedfunzione sostituita.

Il problema che ho è che quando l'array per il ciclo for-each cambia, i valori del componente che non sono parametri immessi vengono confusi.

Puoi vedere questo bug dal vivo qui: https://blazor-field-glitch.azurewebsites.net.

Puoi vedere il codice sorgente completo qui: https://github.com/AskYous/FieldSharingGlitch

Ecco il codice che produce questo problema:

<div class="row">
    @foreach (var color in filteredColors)
    {
        <div class="col-4">
            <ColorCard color="color" />
        </div>
    }
</div>
@code {
    private string filter { get; set; }
    private List<Color> colors = Color.SampleData;
    private List<Color> filteredColors
    {
        get => colors.Where(c => c.SatisfiesQuery(filter)).ToList();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await js.InvokeVoidAsync("focusFilter");
    }
}

E per il componente ColorCard:

<div class="card">
    <img class="card-img" src="@imageUrl" style="height: 400px;" />
    <div class="card-body">
        <small style="color:gray">Is the image accurate after you filter 👆?</small>
        <h2>@color.Name</h2>
        <p>@color.Description</p>
    </div>
</div>

@code {
    [Parameter] public Color color { get; set; }
    private string imageUrl { get; set; }
    protected override void OnInitialized()
    {
        imageUrl = color.ImgUrl; // does not stay. keeps changing.
    }
}

Il imageUrlcampo è ciò che sta causando il problema. Se si filtra per "Giallo", verrà utilizzato il imageUrlrosso. Non sta tenendo traccia del imageUrlcampo.

Ecco una demo gif:

Answer 1

Ho trovato la soluzione. Era da usare @key, simile keyall'attributo di React . Vedere qui:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#use-key-to-control-the-preservation-of-elements-and-components