FluentUI Blazor中FluentAutoComplete组件重复项问题解析与解决方案

问题背景

在FluentUI Blazor组件库中，FluentAutoComplete组件是一个强大的自动完成控件，它允许用户从下拉列表中选择一个或多个选项。然而，在某些特定场景下，开发者可能会遇到一个棘手的问题：当从数据源重新获取相同数据时，组件会允许用户重复添加"相同"的项目，尽管这些项目在业务逻辑上代表的是同一个实体。

问题重现

这个问题的典型场景出现在使用数据库查询结果作为数据源时。考虑以下情况：

1. 开发者使用Dapper或其他ORM工具从数据库查询数据
2. 每次搜索都会执行新的查询，返回新的对象实例
3. 虽然这些对象在业务上代表同一个实体（如相同的用户ID）
4. 但由于是不同的对象实例，组件无法识别它们是"相同"的项目

技术原理分析

问题的根源在于.NET的对象比较机制。默认情况下，FluentAutoComplete组件使用引用相等性来判断两个选项是否相同。当每次查询都返回新的对象实例时，即使这些对象包含相同的属性值，它们在内存中的地址不同，因此组件会认为它们是不同的项目。

解决方案设计

为了解决这个问题，我们可以在ListComponentBase基类中引入一个新的参数OptionComparer。这是一个函数参数，允许开发者自定义比较逻辑来判断两个选项是否相同。

实现细节

1. 新增参数：

/// <summary>
/// 获取或设置用于确定选项是否已添加到内部列表的函数。
/// 第一个参数是内部列表中要检查的项，第二个参数是菜单中实际选中的项。
/// </summary>
[Parameter]
public virtual Func<TOption, TOption, bool>? OptionComparer { get; set; }

2. 修改选择逻辑：

protected virtual async Task OnSelectedItemChangedHandlerAsync(TOption? item)
{
    if (Disabled || item == null) return;

    if (Multiple)
    {
        if (_selectedOptions.Contains(item))
        {
            RemoveSelectedItem(item);
        }
        else if (OptionComparer is not null && 
                _selectedOptions.FirstOrDefault(x => OptionComparer(x, item)) is TOption addedItem)
        {
            RemoveSelectedItem(addedItem);
        }
        else
        {
            AddSelectedItem(item);
        }
        await RaiseChangedEventsAsync();
    }
    // 单选项逻辑保持不变...
}

使用示例

开发者可以这样使用新的OptionComparer参数：

<FluentAutocomplete TOption="MyUser"
                    OptionComparer="IsOptionAdded"
                    @bind-SelectedOptions="Input.Users" />

@code {
    private bool IsOptionAdded(MyUser listItem, MyUser selectedItem)
    {
        return listItem.UserId == selectedItem.UserId;
    }
}

设计考量

1. 灵活性：通过委托函数，开发者可以完全控制比较逻辑，适用于各种复杂场景
2. 向后兼容：该方案不影响现有代码，OptionComparer是可选的
3. 性能考虑：虽然增加了比较逻辑，但对性能影响微乎其微
4. 适用范围：该方案特别适合从数据库查询数据的场景

最佳实践建议

1. 对于实体类，建议实现IEquatable接口
2. 在比较函数中，优先使用唯一标识符（如ID）进行比较
3. 考虑在数据访问层实现缓存，避免频繁查询相同数据
4. 对于大型列表，确保比较函数高效执行

总结

FluentUI Blazor的FluentAutoComplete组件通过引入OptionComparer参数，优雅地解决了动态数据场景下的重复项问题。这一改进不仅增强了组件的实用性，也为开发者处理复杂业务场景提供了更大的灵活性。该方案展示了如何在不破坏现有功能的前提下，通过扩展点来解决特定场景下的需求，是框架设计中开放封闭原则的良好实践。