.NET Blazor组件：现有过滤器列表无法随输入实时更新UI问题

1. 集合未重新实例化导致变更检测失效 #

Blazor的组件变更检测对集合的原地修改（比如List<T>.Add/Remove/Clear）不敏感——因为集合的引用没变化，Blazor会认为数据没更新，自然不会刷新UI。

错误写法示例： #

<input type="text" @oninput="filterExistingFilters" placeholder="输入过滤关键词" />
<ul>
    @foreach (var item in FilteredFilters)
    {
        <li>@item.Name</li>
    }
</ul>

@code {
    private List<FilterModel> AllFilters = new List<FilterModel>();
    private List<FilterModel> FilteredFilters;

    protected override void OnInitialized()
    {
        // 初始化所有过滤器数据
        AllFilters = GetAllFilters();
        FilteredFilters = new List<FilterModel>(AllFilters);
    }

    private void filterExistingFilters(ChangeEventArgs e)
    {
        var keyword = e.Value?.ToString() ?? string.Empty;
        // 错误：原地清空再添加，集合引用没变，Blazor不触发更新
        FilteredFilters.Clear();
        foreach (var filter in AllFilters.Where(f => f.Name.Contains(keyword)))
        {
            FilteredFilters.Add(filter);
        }
    }
}

修正方法： #

直接创建新的集合实例替换原有引用，让Blazor检测到数据变化：

private void filterExistingFilters(ChangeEventArgs e)
{
    var keyword = e.Value?.ToString() ?? string.Empty;
    // 正确：生成新的List实例，替换FilteredFilters的引用
    FilteredFilters = AllFilters.Where(f => f.Name.Contains(keyword)).ToList();
}

2. 异步场景下需手动触发状态变更 #

如果你的过滤逻辑包含异步操作（比如从API拉取数据、异步计算），Blazor可能不会自动触发UI更新，这时候需要手动调用StateHasChanged()通知组件重新渲染。

示例：

private async Task filterExistingFilters(ChangeEventArgs e)
{
    var keyword = e.Value?.ToString() ?? string.Empty;
    // 模拟异步获取过滤数据
    var filteredData = await GetFilteredFiltersAsync(keyword);
    FilteredFilters = filteredData.ToList();
    // 手动通知组件更新UI
    StateHasChanged();
}

注：同步方法下一般不需要手动调用，Blazor会自动处理，但如果遇到极端情况（比如在事件回调外修改数据），也可以尝试调用这个方法。

3. 检查@oninput的参数绑定是否正确 #

确保你的过滤方法正确接收ChangeEventArgs参数，才能拿到输入框的最新值。如果方法没有参数或参数类型错误，过滤逻辑根本无法正确执行。

错误写法： #

// 错误：没有接收参数，拿不到输入值
private void filterExistingFilters()
{
    // 这里无法获取用户输入的关键词，过滤逻辑等于没执行
}

正确写法： #

// 正确：通过ChangeEventArgs获取输入框的值
private void filterExistingFilters(ChangeEventArgs e)
{
    if (e.Value == null) return;
    var keyword = e.Value.ToString().Trim();
    // 执行过滤逻辑
}

内容的提问来源于stack exchange，提问作者Matthew Angel