如何使来自端点的数据每次出现一次而不是重复出现？

Question

我有一个数组，其中包含每个索引处的对象。 我想把 colors 放在<tr><td></td></tr>里面。 使用下面我当前的代码（当我console.log(data[item].colors);时） - 所有 colors 重复出现，而不是只显示一次。 我正在使用的端点使这种行为是有意的。

我将如何使每种颜色仅显示一次，包括将来将新的 colors 添加到端点时？ 我尝试了很多方法来解决这个问题，但无济于事。

当我console.log(data[item].colors); ：

(3) Blue
(12) Green
(5) Teal
(4) Red
Purple
(3) Blue
(12) Green
(5) Teal
(4) Red

我的代码：

<>
   {
      Object.keys(data).map((item,index) => {
        return <tr key={index}><td>{data[item].colors}</td></tr>
      })
   }
</>

Answer 1

我在这里的第一个 Stackoverflow 答案......

我不完全理解这个问题，但如果你想避免在<tr></tr>中重复单词，我建议使用 Set：

 // This may be your array let colors = ["Blue", "Blue", "Red", "Teal", "Blue", "Red", "Teal"] // Step 1 let filteredColors = new Set(colors); // Step 2: Convert the result object to an array again let newColors = [...filteredColors]; console.log(newColors) // ["Blue", "Red", "Teal"]

然后你可以像以前一样 map 你的新阵列。

编辑

如果 Array 内部有对象并且您想过滤来自特定键的所有值以显示它们而不重复，我使用解决方案制作了这个 CodeSandbox：

https://codesandbox.io/s/colors-solution-lxw6q?file=/src/App.js

希望这对您有所帮助。

Answer 2

将 api 的响应转换为Set ：

设置对象是 collections 的值。 您可以按插入顺序遍历集合的元素。 Set 中的一个值只能出现一次； 它在 Set 的系列中是独一无二的。

所以你可以创建一个新的集合，然后循环 colors 并将它们添加到集合中，而不用担心重复：

const colors = new Set();
data[item].colors.forEach(color => colors.add(color));

您可以使用values或entries方法遍历集合，或者将其转换为像这样的数组[...colors]或像这样Array.from(colors)并使用普通的数组方法。