如何编写可复用的对象数组指定属性去重函数？

一、通用去重函数的正确写法 #

你之前用的product.item语法不对，因为item是传入的动态变量，访问对象的动态属性得用方括号语法product[item]，点语法只能访问固定名称的属性。正确的通用去重函数如下：

function dedupeCheckboxOptions(fullList, item) {
    return [...new Set(fullList.map(product => product[item]))];
}

调用示例（支持任意属性去重）：

// 提取不重复的品牌
const uniqueBrands = dedupeCheckboxOptions(productList, 'brand');
// 提取不重复的价格
const uniquePrices = dedupeCheckboxOptions(productList, 'price');

二、React中productList未定义的排查方案 #

控制台提示productList未定义，可以从这几个方向排查：

• 检查导入是否正确：确认你从对应文件正确导入了productList，比如：

  // 假设productList在src/data/products.js文件中
  import { productList } from './data/products';
  

  注意文件路径是否正确，导入的变量名要和导出的productList完全一致。

• 确认数据加载时机：如果productList是异步获取的（比如从后端接口请求），要确保数据返回后再调用去重函数，比如用useEffect配合状态管理：

  import { useState, useEffect } from 'react';
  
  function ProductFilter() {
    const [productList, setProductList] = useState([]);
  
    useEffect(() => {
      // 模拟异步请求数据
      fetch('/api/products')
        .then(res => res.json())
        .then(data => setProductList(data));
    }, []);
  
    // 只有当productList有数据时才执行去重
    const uniqueBrands = productList.length > 0 ? dedupeCheckboxOptions(productList, 'brand') : [];
  
    return <div>{/* 渲染筛选组件 */}</div>;
  }
  

• 检查作用域问题：确保调用dedupeCheckboxOptions时，productList在当前组件/函数的作用域内是可访问的，比如不要在嵌套函数里引用未传递的外部变量。

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