Campos imprecisos no Blazor para cada loop

Question

Eu tenho um loop for-each em meu componente e, no loop, um componente que fiz é renderizado. Um objeto é passado e o componente inicializa seus próprios campos na OnInitializedfunção substituída.

O problema que tenho é que quando o array para o loop for-each muda, os valores do componente que não são parâmetros introduzidos se confundem.

Você pode ver esse bug ao vivo aqui: https://blazor-field-glitch.azurewebsites.net.

Você pode ver o código-fonte completo aqui: https://github.com/AskYous/FieldSharingGlitch

Este é o código que produz esse 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 para o 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.
    }
}

O imageUrlcampo é o que está causando o problema. Se você filtrar por "Amarelo", ele usará imageUrlpara vermelho. Não é controlar o imageUrlcampo.

Aqui está uma demonstração de gif:

Answer 1

Eu encontrei a solução. Era para usar @key, semelhante ao keyatributo do React . Veja aqui:

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