Javascript 在react中映射后过滤重复类别

在动态显示（获取对象）我的类别后。。 我只是想删除副本，但在地图（）中我不知道如何做

问题是map返回单个数组中的每个类别

我应该在jsx中还是在函数js中这样做

谢谢大家

const SideMenu = () => {
  const [loading, products] = useFetchAllProducts();
  console.log("products", products);

  const loadCategory = (i) => {
    console.log(i);
    return i;
  };

  const filterCategory = (c) => {
    return c;
  };

  return (
    <div>
      <ul>
        {products.map((link, index) => (
          <li key={link._id} onClick={() => loadCategory(index)}>
            {filterCategory(link.categoryProduct)}{" "}
          </li>
        ))}

        {/* Result =
              Masks
              Teddy
              Teddy
              Backpack
              Pencil case
              Pencil case
              Pencil case 
              ...
       */}
      </ul>
    </div>
  );
};

const侧菜单=（）=>{
const[loading，products]=useFetchAllProducts（）；
控制台日志（“产品”，产品）；
常量加载类别=（i）=>{
控制台日志（i）；
返回i；
};
常量过滤器类别=（c）=>{
返回c；
};
返回(

{products.map（（链接，索引）=>(
loadCategory（index）}>
{filterCategory（link.categoryProduct）}{”“}

))}
{/*结果=
面具
泰迪
泰迪
背包
铅笔盒
铅笔盒
铅笔盒
...
*/}

);
};

用于将产品细分为独特的类别：

const SideMenu = () => {
  const [loading, products] = useFetchAllProducts();

  // Make a set of unique categories...
  const categorySet = new Set(products.map((p) => p.categoryProduct));
  // ... and a sorted array from the set.
  const categories = Array.from(categorySet).sort();

  return (
    <div>
      <ul>
        {categories.map((category, index) => (
          <li key={category}>{category}</li>
        ))}
      </ul>
    </div>
  );
};

const侧菜单=（）=>{
const[loading，products]=useFetchAllProducts（）；
//制作一组独特的类别。。。
const categorySet=新集合（products.map（（p）=>p.categoryProduct））；
//…和集合中的已排序数组。
const categories=Array.from（categorySet.sort（）；
返回(

{categories.map（（类别，索引）=>(
{category}
))}

);
};