React中如何根据门店筛选器清空并重新选择下拉选项？

你的核心问题出在商品列表的数据源依赖了recentFound（历史选中记录），而不是当前选中门店对应的全量商品集合，导致重新选门店时只能看到之前选过的商品。另外重置门店时没有同步清空商品的选中状态，也会导致残留问题。

具体修改步骤： #

1. 替换商品列表的数据源
   把依赖recentFound的逻辑改成从门店对应的全量商品数据中获取，比如你可以维护一个门店与商品的映射，或者在选中门店时请求该门店的所有商品：

   // 示例：按门店存储全量商品的映射（实际可从接口获取）
   const storeToItemsMap: Record<string, any[]> = {
     store1: [{ id: 1, name: "商品A" }, { id: 2, name: "商品B" }],
     store2: [{ id: 3, name: "商品C" }, { id: 4, name: "商品D" }]
   };
   
   // 修正items生成逻辑：取当前门店的全量商品，而非历史选中记录
   const items: any = !_.isEmpty(filters["store"])
     ? storeToItemsMap[filters["store"]] || []
     : [];
   

2. 重置门店时同步清空商品选中值
   在处理门店筛选器变化的函数里，当门店被重置为空时，立即清空商品的选中状态：

   const handleStoreChange = (selectedStore: string) => {
     const newFilters = { ...filters, store: selectedStore };
     // 门店清空时同步清空商品选中
     if (_.isEmpty(selectedStore)) {
       newFilters.item = "";
     }
     // 更新filters状态（根据你的状态管理方式调整，比如setFilters）
     setFilters(newFilters);
   };
   

3. 确保商品下拉框与状态同步
   商品下拉框的选项直接绑定修正后的items数组，选中值绑定filters.item。这样每次切换门店时，选项会自动更新为对应门店的全量商品，重置门店时选中值也会同步清空。

这样修改后，重置门店时商品下拉会清空，重新选择门店后能看到该门店的所有商品，无需刷新页面。

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