React项目中如何去除react-select下拉框的重复品牌选项？

要去除重复的品牌选项，核心是先从车辆列表中提取唯一的品牌值，再生成react-select需要的options数组，以下是两种简单可行的实现方式：

方法一：利用ES6 Set自动去重 #

Set会自动过滤重复值，先提取所有品牌存入Set，再转为数组后生成选项：

const FilterSideBar = ({carsList}) => {
  // 提取唯一品牌
  const uniqueMakes = [...new Set(carsList.map(car => car.make))];
  // 生成options数组
  const options = uniqueMakes.map(make => ({
    value: make,
    label: make
  }));

  return (
    <>
      <Select options={options} styles={colourStyles} isSearchable={false}/>
    </>
  )
}

方法二：使用reduce手动去重 #

如果需要兼容不支持Set的环境，或者需要更灵活的控制，可以用reduce来遍历并记录已出现的品牌：

const FilterSideBar = ({carsList}) => {
  // 用reduce生成唯一品牌的对象，key为品牌名
  const uniqueMakesObj = carsList.reduce((acc, car) => {
    if (!acc[car.make]) {
      acc[car.make] = true;
    }
    return acc;
  }, {});
  // 提取对象的key作为唯一品牌数组
  const uniqueMakes = Object.keys(uniqueMakesObj);
  // 生成options数组
  const options = uniqueMakes.map(make => ({
    value: make,
    label: make
  }));

  return (
    <>
      <Select options={options} styles={colourStyles} isSearchable={false}/>
    </>
  )
}

两种方法都能有效去除重复的品牌选项，其中Set的方式代码更简洁，推荐在现代浏览器环境下使用。

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