如何防止 Blazor EventCallback 将所选项目重置为默认值

Question

我对 Blazor 上子组件的 return 事件有疑问。

我目前正在使用 MudBlazor，我创建了一个名为 BrandSelect 的组件，它加载了用户可以 select 的品牌列表。

我在select中使用的Brandclass有两个变量：Id和Name。

这是 BrandSelect 组件的代码：

@inject IBrandService brandService

<MudSelect Value="@SelectedBrand" ValueChanged="OnValueChanged" T="int">
    @foreach (var item in brands)
    {
        <MudSelectItem T="int" Value="@item.Id">@item.Name</MudSelectItem>
    }
</MudSelect>

@code {

    [Parameter]
    public int SelectedBrand { get; set; }

    [Parameter]
    public EventCallback<int> SelectedBrandChanged { get; set; }

    private IEnumerable<Brand> brands;

    protected override async Task OnInitializedAsync()
    {
        brands = await brandService.GetAll(); //Reading the brand from database
        if(brands.Any() && SelectedBrand == 0)
        {
            SelectedBrand = brands.First().Id;
        }
    }

    private async Task OnValueChanged(int value)
    {
        SelectedBrand = value;
        await SelectedBrandChanged.InvokeAsync(SelectedBrand);
    }
}

这是我使用 BrandSelect 组件的页面代码：

<BrandSelect @ref="brandSelect" SelectedBrand="0" SelectedBrandChanged="LoadBrandPlanning" />

@code {
    private async void LoadBrandPlanning()
    {
        if(brandSelect.SelectedBrand > 0)
        {
            //Do some stuff
        }
    }
}

当用户 select 品牌时，数据 return 对 LoadBrandPlanning 函数正确，但 selected of BrandSelect 的项目将保留旧值。

我该如何解决？

Answer 1

尝试在你的MudSelectItem中尝试使用@key="item.Id"：

@key是如何工作的

Blazor 首先生成预期的 DOM，然后将当前的 DOM 与新的 DOM 进行比较，然后应用差异。以前的算法默认使用元素索引进行比较，但是当你有一个像 li 这样的元素集合时，这并不总是正确的，因为当你添加 @key 时，它会插入最后一个而看不到数据的变化它将使用特定的键来比较元素而不是使用索引。

如何防止 Blazor EventCallback 将所选项目重置为默认值

How prevent Blazor EventCallback reset selected item to default value

blazor

blazor-server-side

mudblazor