React电商应用中选择过滤器后如何更新过滤器选项值

你的问题根源在于过滤器选项始终基于原始产品列表生成，没有跟随已筛选的产品结果动态调整。以下是具体的修改方案：

核心思路 #

采用逐步分层过滤的方式，依次生成各过滤器的数据源：

1. 先根据品牌（marca）过滤产品，得到中间结果用于生成系列（linea）选项
2. 再基于品牌过滤后的结果，根据系列过滤，得到中间结果用于生成型号（modelo）选项
3. 最后结合三个过滤条件得到最终展示的产品列表

代码修改步骤 #

1. 替换原始过滤逻辑，添加分层过滤变量 #

删除原有的filteredProducts多分支if-else代码，替换为以下分层过滤逻辑：

// 第一步：按品牌过滤（用于生成系列选项）
const filteredByMarca = filter.marca 
  ? products.products.filter(p => p.marca === filter.marca)
  : products.products;

// 第二步：按品牌+系列过滤（用于生成型号选项）
const filteredByMarcaLinea = filter.linea
  ? filteredByMarca.filter(p => p.linea === filter.linea)
  : filteredByMarca;

// 第三步：最终产品列表（品牌+系列+型号）
const filteredProducts = filter.modelo !== 0
  ? filteredByMarcaLinea.filter(p => p.modelo == filter.modelo)
  : filteredByMarcaLinea;

2. 更新过滤器选项的数据源 #

修改三个下拉框的选项生成逻辑，分别对应不同的分层过滤结果：

品牌（marca）下拉框

保持用原始数据（品牌是一级筛选维度，无需依赖其他条件）：

<select className='form-control' name='marca' id='marca' onChange={handleFilter}>
  <option value=''>Todas</option>
  {distinctValues(products.products, 'marca').map((marca) => (
    <option key={marca} value={marca}>{marca}</option>
  ))}
</select>

系列（linea）下拉框

改为使用filteredByMarca作为数据源（只显示当前品牌下的可用系列）：

<select className='form-control' name='linea' id='linea' onChange={handleFilter}>
  <option value=''>Todas</option>
  {distinctValues(filteredByMarca, 'linea').map((linea) => (
    <option key={linea} value={linea}>{linea}</option>
  ))}
</select>

型号（modelo）下拉框

改为使用filteredByMarcaLinea作为数据源（只显示当前品牌+系列下的可用型号）：

<select className='form-control' name='modelo' id='modelo' onChange={handleFilter}>
  <option value=''>Todos</option>
  {distinctValues(filteredByMarcaLinea, 'modelo').map((modelo) => (
    <option key={modelo} value={modelo}>{modelo}</option>
  ))}
</select>

3. （可选）简化过滤逻辑 #

如果觉得分层过滤的写法冗余，也可以用更简洁的方式实现最终产品过滤：

const filteredProducts = products.products.filter(product => {
  const matchesMarca = filter.marca ? product.marca === filter.marca : true;
  const matchesLinea = filter.linea ? product.linea === filter.linea : true;
  const matchesModelo = filter.modelo !== 0 ? product.modelo == filter.modelo : true;
  return matchesMarca && matchesLinea && matchesModelo;
});

但分层过滤的变量仍然需要保留，用于生成各过滤器的选项。

效果说明 #

修改后：

• 选择某个品牌后，系列下拉框只会显示该品牌下存在的系列选项
• 再选择系列后，型号下拉框只会显示该品牌+系列下存在的型号选项
• 清空任意过滤条件时，后续下拉框会自动恢复到对应层级的可用选项

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