Blazor中多次使用Autocomplete组件时搜索结果同步显示的问题咨询

你遇到的问题本质是全局Fluxor状态被所有组件实例共享，当状态更新时所有订阅该状态的组件都会触发重渲染。解决思路分两种，可根据业务需求选择：

方案一：按组件实例ID隔离全局状态 #

如果你的搜索结果需要全局共享（比如其他组件要访问某实例的搜索结果），可以给每个Autocomplete实例分配唯一标识，在Fluxor状态中按标识存储对应结果：

1. 给组件添加唯一实例ID：
   组件内部自动生成或由父组件传入唯一ID，确保每个实例的ID不重复：

   @code {
       // 自动生成唯一ID，也可由父组件传入自定义值
       [Parameter] public string InstanceId { get; set; } = Guid.NewGuid().ToString();
       private List<SearchResult> _currentResults = new();
   }
   

2. 修改Fluxor状态结构：
   将原来的单个搜索结果列表改成字典，键为实例ID，值为对应实例的结果：

   public class AutocompleteState
   {
       // 按实例ID存储搜索结果
       public Dictionary<string, List<SearchResult>> InstanceSpecificResults { get; } = new();
       // 其他全局状态字段...
   }
   

3. 发起搜索时携带实例ID：
   触发搜索动作时，把当前组件的InstanceId传给Action，让Reducer知道要更新哪个实例的结果：

   private async Task TriggerSearch(string query)
   {
       await Dispatcher.Dispatch(new PerformSearchAction(query, InstanceId));
   }
   

4. Reducer中更新对应实例的结果：
   处理Action时，只修改字典中对应InstanceId的条目：

   [ReducerMethod]
   public static AutocompleteState ReducePerformSearchAction(AutocompleteState state, PerformSearchAction action)
   {
       // 复制原字典避免直接修改状态（Fluxor要求状态不可变）
       var updatedResults = new Dictionary<string, List<SearchResult>>(state.InstanceSpecificResults);
       // 假设这里已通过API获取到搜索结果newResults
       updatedResults[action.InstanceId] = newResults;
       return new AutocompleteState { InstanceSpecificResults = updatedResults };
   }
   

5. 组件订阅状态时过滤自身结果：
   组件只提取与自身InstanceId匹配的结果：

   protected override void OnInitialized()
   {
       Store.Subscribe<AutocompleteState>(state =>
       {
           state.InstanceSpecificResults.TryGetValue(InstanceId, out var results);
           _currentResults = results ?? new List<SearchResult>();
           StateHasChanged();
       });
   }
   

方案二：将搜索状态本地化（脱离全局Fluxor） #

如果每个Autocomplete的搜索都是独立的，不需要全局共享状态，直接把搜索逻辑和结果放在组件内部，完全绕过Fluxor：

<input @bind="_searchQuery" @oninput="HandleInput" placeholder="输入搜索内容" />
<button @onclick="HandleSearch">搜索</button>

@if (_results.Any())
{
    <ul class="search-results">
        @foreach (var item in _results)
        {
            <li>@item.DisplayText</li>
        }
    </ul>
}

@code {
    private string _searchQuery = string.Empty;
    private List<SearchResult> _results = new();
    [Inject] private ISearchApiService SearchApi { get; set; }

    private async Task HandleInput()
    {
        if (string.IsNullOrWhiteSpace(_searchQuery))
        {
            _results.Clear();
            return;
        }
        // 直接调用API获取结果，存在组件私有变量中
        _results = await SearchApi.GetResultsAsync(_searchQuery);
    }

    private async Task HandleSearch()
    {
        _results = await SearchApi.GetResultsAsync(_searchQuery);
    }
}

这种方案下每个组件实例维护自己的搜索状态，完全不会互相干扰，实现成本更低，适合不需要全局状态的场景。

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