Javascript 如何使来自端点的数据每次显示一次而不是重复显示？

我有一个数组，其中每个索引都包含对象。我想把颜色放在

中。使用下面的当前代码（当我

console.log（data[item].colors）；

）时，所有颜色都会重复出现，而不是只显示一次。我使用的端点使这种行为成为故意的

如何使每种颜色只显示一次，包括将来向端点添加新颜色时？我尝试了很多方法来解决这个问题，但都没有用

当I

console.log（数据[item].colors）时：

我的代码：

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


{
Object.keys（数据）.map（（项目，索引）=>{
返回{data[item].colors}
})
}
将api的响应转换为：

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

因此，您可以创建一个新集合，然后循环颜色并将其添加到集合中，而无需担心重复：

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

您可以使用
值
或
条目
方法对集合进行迭代，或者将其转换为类似于
[…colors]
或类似于
数组的数组。从（colors）
并使用常规数组方法。
Mi first Stackoverflow回答这里

我不完全理解这个问题，但如果您想避免在
中重复单词，我建议您使用一套：


//这可能是您的数组
让颜色=[“蓝色”、“蓝色”、“红色”、“青色”、“蓝色”、“红色”、“青色”]
//第一步
让filteredColors=新设置（颜色）；
//步骤2：再次将结果对象转换为数组
让newColors=[…过滤颜色]；
console.log（newColors）
//[“蓝色”、“红色”、“青色”]
对不起，我应该说得更清楚一点，这是一个数组对象，像这样：
[{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{。也许有一个更干净的解决方案，但我建议在映射之前对数组进行预处理。我用我的解决方案制作了一个代码沙盒谢谢你，这正是我所需要的！很高兴它帮助了你，我刚刚编辑了我的第一个答案。祝您有个美好的一天！
const colors = new Set();
data[item].colors.forEach(color => colors.add(color));