如何根据特定属性筛选对象数组 实现电商商品尺码过滤功能

你已经完成了选值事件绑定和状态存储，只需要补全商品过滤逻辑、修复下拉框默认值小问题就能实现完整功能，步骤如下：

• 首先修复下拉选择框的默认选项问题，给默认的Size选项设置空值，避免未选择尺码时拿到无效筛选值：

<select
  onChange={sizeFilterHandler}
  className="form-select mb-3"
  aria-label=".form-select-lg example"
>
  <option value="" selected>Size</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
  <option value="XXL">XXL</option>
  <option value="XXXL">XXXL</option>
</select>

• 在渲染商品列表前，基于存储的sizeFilter状态对全量商品数据做过滤，注意处理尺码命名不一致、无筛选值时展示全量商品、仅展示有实际可售库存的商品几个边界情况：

// 假设全量商品数据存在products变量/状态中
// 尺码映射表，解决下拉选项XXXL和库存字段里3XL命名不统一的问题
const sizeMatchMap = {
  XXXL: "3XL"
};

const displayProducts = products.filter((product) => {
  // 未选择具体尺码时，展示全部商品
  if (!sizeFilter) return true;

  // 转换为库存数据里对应的尺码标签
  const targetSize = sizeMatchMap[sizeFilter] || sizeFilter;

  // 只要商品库存中存在对应尺码、可售、库存数大于0的SKU，就保留该商品
  return product.inventoryInfo.some(
    (sku) => sku.label === targetSize && sku.available && sku.inventory > 0
  );
});

• 最后把原来直接遍历全量products渲染列表的代码，替换成遍历displayProducts即可，选中对应尺码后页面会自动重渲染符合条件的商品。

实现说明：用数组some方法判断库存是否存在符合条件的SKU，只要有一个匹配的可售尺码就保留商品，和主流电商的筛选逻辑完全一致；额外加了库存数大于0的判断，避免available字段未及时同步导致展示无货商品的问题。

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