如何正确映射 obj 和 return 具有多个相同值的单个值 ReactJS

Question

我想解释一下我今天遇到的问题。

目前我有一个对象数组

我映射这个table

[
 { id: "a", location: "FR", zone: "EU" } ,
 { id: "b", location: "FR", zone: "EU" } , 
 { id: "c", location: "ES", zone: "EU" } , 
 { id: "d", location: "ES", zone: "EU" } ,
]

为了对所有数据进行排序，我使用 useEffect 只检索我需要的值

useEffect(() => {
    if (data) {
        const location = data.map((e) => {
            return {
                label: e.location,
            };
        });

        setLocations(locations);
    }
}, [data]);

这工作正常。

除此之外 returns 我的格式如下

0: {label: 'FR'}
1: {label: 'FR'}
2: {label: 'ES'}
4: {label: 'ES'}

我想要以下格式

  0: {label: 'FR'}
  1: {label: 'ES'}

基本上它会删除相同的密钥

我愿意接受任何建议，非常感谢。

Answer 1

使用过滤器和 indexOf

data = data.filter(function (value, index, array) { 
  return array.indexOf(value) === index;
});

Answer 2

由于您将 location 用作确定唯一性的 id-like 属性，因此您可以：

const data = [
  { id: "a", location: "FR", zone: "EU" } ,
  { id: "b", location: "FR", zone: "EU" } , 
  { id: "c", location: "ES", zone: "EU" } , 
  { id: "d", location: "ES", zone: "EU" } ,
];

console.log(
  Array
    .from(new Set(data.map(d => d.location)))  
    .map(label => ({ label }))
  
)

这首先将列表转换为字符串数组。它使用 Set 来去除重复的字符串。然后，它转换为所需的输出格式。

data.map(d => d.location) 给出 [ "FR", "FR", "ES", "ES" ]
Array.from(new Set(...)) 给出 [ "FR", "ES" ]
(...).map(label => ({ label })) 给出最终输出

如何正确映射 obj 和 return 具有多个相同值的单个值 ReactJS

how to correctly map an obj and return a single value with several identical values ReactJS

javascript

arrays

reactjs