在reduce函数的输出中删除重复项

Question

当我的projects的名称在logo功能的帮助下与items中的projects对象匹配时，我将输出reduce的匹配值。但是，每当我单击两个都匹配project.items的徽标时，便会呈现重复的徽标。

这是我的代码：

logos.reduce((acc, logo) => {
    if (logo.active) {
        Object.values(projects).forEach((proj) => {
           if (Object.values(proj.items).includes(logo.name)) {
              console.log(acc)
              acc.push((<Project title={proj.title} routeName={proj.routeName} items={proj.items} description={proj.description}/>));
           }
        });
    }
      return acc
}, [])

[我的第一个想法是创建另一个数组，运行一个for循环，并遍历诸如filteredValues[i].props.title的值，并将该循环的内容压入一个数组。我在该数组上运行了一个reduce，但无法消除重复项：

const filteredArr = arr.reduce((acc, current) => {
  const x = acc.find(item => item.title === current.title);
  if (!x) {
    return acc.concat([current]);
  } else {
    return acc;
  }
}, []);

无论如何，这是我用来渲染acc组件的Project的输出

Answer 1

您可以这样编写原始循环

logos
  .reduce((acc, logo) => {
    if (logo.active) {
      Object.values(projects).forEach((proj) => {
        if (
          Object.values(proj.items).includes(logo.name) &&
          !acc.find((item) => item.value === logo.name)
        ) {
          console.log(acc);
          acc.push({
            value: logo.name,
            component: (
              <Project
                title={proj.title}
                routeName={proj.routeName}
                items={proj.items}
                description={proj.description}
              />
            ),
          });
        }
      });
    }
    return acc;
  }, [])
  .map((values) => values.component);

Answer 2

您可以使用Map对象过滤出重复项。

let arrFiltered = [];

// form map of unique arr items
const arrMap = new Map();
arr.forEach(item => arrMap.set(item.title, item));

// form array of all items in map
arrMap.forEach(item => arrFiltered.push(item));

Answer 3

可能需要下面的代码。

const filteredArr = this.getUnique(arr, 'title'); 

getUnique(arr, comp) {
   const unique =  arr.map(e => e[comp]).map((e, i, final) => final.indexOf(e) === i && i).filter((e) => arr[e]).map(e => arr[e]);

   return unique;
}

涉及的步骤是：

1. 将比较值存储在数组“ arr.map（e => e [comp]）”中]
2. 存储唯一对象的索引“ .....）。map（（e，i，final）=> final.indexOf（e）=== i && i）”
3. 消除错误索引并返回唯一对象“ .....）。filter（（e）=> arr [e]）。map（e => arr [e]）”

Answer 4

我必须在原始reduce循环之外运行forEach函数，并使用some函数检查那些值。

    logos.reduce((acc, logo) => {
      if (logo.active) {
          Object.values(projects).forEach((proj) => {
             if (Object.values(proj.items).includes(logo.name)) {
               console.log(acc)

               acc.push((<Project title={proj.title} routeName={proj.routeName} items={proj.items} description={proj.description}/>));
             }
          });
          acc = acc.reduce(function (p, c) {
            if (!p.some(function (el) { return el.props.title === c.props.title; })) p.push(c);
            return p;
          }, []);
      }
        return acc
  }, [])