如何过滤含对象数组的商品数组？现有React代码失效求助

嘿，我来帮你搞定这个商品类别的过滤问题！结合你描述的场景，我猜你大概率是在匹配类别时没正确遍历商品的categories数组，或者没处理好边界情况，下面给你一步步梳理解决方案：

首先咱们先对齐数据格式，避免理解偏差：

// 你的categories数组示例
const categories = [
  { id: 1, title: "数码产品" },
  { id: 2, title: "服饰鞋包" },
  { id: 3, title: "家居用品" }
];

// 你的products数组示例（每个商品的categories是带title的对象数组）
const products = [
  {
    id: 101,
    name: "无线耳机",
    categories: [{ title: "数码产品" }, { title: "智能设备" }]
  },
  {
    id: 102,
    name: "纯棉T恤",
    categories: [{ title: "服饰鞋包" }, { title: "男装" }]
  },
  {
    id: 103,
    name: "北欧台灯",
    categories: [{ title: "家居用品" }]
  }
];

你的状态里应该有selectedCategory（比如选中的类别title，或者整个类别对象）。

你之前的filterCategories失效，大概率是这两个问题：

1. 直接用===比较商品的categories数组和选中的类别值，类型不匹配肯定返回false
2. 没处理选中类别为空的情况（比如用户还没选类别时应该返回所有商品）

下面是适配你场景的类组件方法，我会逐行注释说明：

filterCategories = () => {
  // 从状态中解构出需要的变量
  const { selectedCategory, products } = this.state;

  // 边界情况：如果没有选中任何类别，直接返回全部商品
  if (!selectedCategory) {
    return products;
  }

  // 核心过滤逻辑：遍历商品数组，保留符合条件的商品
  return products.filter(product => {
    // 用some()遍历商品的categories数组，只要有一个类别title匹配就保留该商品
    // 注意：如果你的selectedCategory是整个类别对象（不是title字符串），就改成category.id === selectedCategory.id
    return product.categories.some(category => category.title === selectedCategory);
  });
};

为什么用some()而不是find()？因为some()会返回布尔值，刚好符合filter的判断需求——只要商品属于选中类别就保留。

在render里调用这个方法，渲染过滤后的商品：

render() {
  // 获取过滤后的商品列表
  const filteredProducts = this.filterCategories();

  return (
    <div className="product-filter">
      {/* 类别选择下拉框 */}
      <select
        value={this.state.selectedCategory || ""}
        onChange={(e) => this.setState({ selectedCategory: e.target.value })}
      >
        <option value="">全部类别</option>
        {this.state.categories.map(category => (
          <option key={category.id} value={category.title}>
            {category.title}
          </option>
        ))}
      </select>

      {/* 渲染过滤后的商品 */}
      <div className="product-list">
        {filteredProducts.map(product => (
          <div key={product.id} className="product-item">
            <h3>{product.name}</h3>
            {/* 可选：渲染商品所属类别 */}
            <p>所属类别：{product.categories.map(c => c.title).join(", ")}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

• 如果你的selectedCategory存储的是类别对象（不是title字符串），记得把匹配逻辑改成category.id === selectedCategory.id，避免字符串匹配的潜在问题（比如title重复）
• 如果商品的categories可能为空数组，你可以在filter里加判断：product.categories.length > 0 && ...，避免空数组导致的意外过滤
• 要是用函数组件+hooks，逻辑是一样的，只是把this.state换成useState的变量就行

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