如何正确映射 obj 并返回具有多个相同值的单个值 ReactJS

Question

I would like to explain my problem of the day.

currently i have an array of object

I map this 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" } ,
]

to sort all the data I use a useEffect to retrieve only the values ​​I need

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

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

this works correctly.

except which returns me the following format

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

and I would like to have the following format

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

basically it removes the identical key

iam open to any proposal thank you very much.

Answer 1

Since you're using location as an id-like property that determines the uniqueness, you can do:

 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 })) )

This first transforms the list to an array of strings. It uses a Set to get rid of duplicate strings. Then, it transforms to the desired output format.

• data.map(d => d.location) gives [ "FR", "FR", "ES", "ES" ]
• Array.from(new Set(...)) gives [ "FR", "ES" ]
• (...).map(label => ({ label })) gives the final output

Answer 2

use filter and indexOf

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