Blazor for Each循环中的字段不准确 [英] Fields inaccurate in Blazor for each loops

问题描述

我的组件中有一个for-each循环，在该循环中，呈现了我创建的一个组件。它被传递给一个对象，然后该组件在OnInitialized被覆盖的函数中初始化自己的字段。

我遇到的问题是，当for-each循环的数组更改时，不是输入参数的组件的值会被混淆。

您可以在此处看到此错误：https://blazor-field-glitch.azurewebsites.net。

您可以在此处查看完整的源代码：https://github.com/AskYous/FieldSharingGlitch

以下是产生此问题的代码：

<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");
    }
}

对于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.
    }
}

imageUrl字段是导致问题的原因。如果您筛选黄色，则它将使用imageUrl表示红色。它没有跟踪imageUrl字段。

这里有一个gif演示：

推荐答案

我找到了解决方案。它使用@key，类似于Reaction的key属性。查看此处：

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

这篇关于Blazor for Each循环中的字段不准确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！