无法筛选含嵌套对象的产品列表，寻求技术解决方案

你的筛选代码失效的核心原因是：两层map返回了二维数组，但filteredColors.includes()只能检测单一值是否存在于数组中，导致匹配逻辑完全错误。

修正后的代码 #

const handleFilterColors = (product) => {
  // 无筛选条件时直接保留所有产品
  if (filteredColors.length === 0) return true;

  // 提取当前产品的所有颜色值（转成一维数组）
  const productColors = product.attributes
    // 只筛选出颜色属性，避免其他属性干扰
    .filter(attribute => attribute.name === 'color')
    // 把嵌套的颜色值拍平成一维数组
    .flatMap(attribute => attribute.attribute_values.map(item => item.value));

  // 检查产品是否包含任意一个筛选颜色
  return productColors.some(color => filteredColors.includes(color));
};

const filteredAndSortedProducts = products.filter(handleFilterColors);

关键逻辑说明 #

1. 精准筛选颜色属性：先用filter(attribute => attribute.name === 'color')过滤出产品的颜色属性，避免误处理其他类型的属性。
2. 扁平化颜色数组：用flatMap替代嵌套map，把原本的二维颜色数组（比如[['blue', 'green']]）转换成一维数组['blue', 'green']，方便后续匹配。
3. 存在性匹配：用some方法检查产品颜色中是否有任意一个出现在筛选列表里，只要有匹配就保留该产品。

原代码的问题分析 #

你的原代码中，product.attributes.map(...).map(...)返回的是二维数组（例如[['blue', 'green']]），而filteredColors.includes()是用来判断某个单一值是否在数组中，两者类型不匹配，所以永远返回false，导致筛选后没有产品被保留（当filteredColors不为空时）。

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