使用字典映射 API 响应并创建对象数组，尝试删除重复项

Question

I have a React component that I'm using a dictionary inside of to compare against an API response for address state, and map only the states that are returned back as options in a dropdown.

This is the mapping function I'm using to create the array of returned states:

let activeStates = props.locations.map(x => ({abbr: x.address.state, name: states[x.address.state]as string}));

Against my dictionary which looks like this:

const states = {
  AL: "Alabama",
  AK: "Alaska",
  AZ: "Arizona",
  AR: "Arkansas",
  CA: "California",
  CO: "Colorado",
  (all US states are included)
};

And that creates an array of all the location addresses in a response like this:

3:
abbr: "3"
name: {abbr: "TN", name: "Tennessee"}
__proto__: Object
4:
abbr: "4"
name: {abbr: "WI", name: "Wisconsin"}
__proto__: Object
5:
abbr: "5"
name: {abbr: "NC", name: "North Carolina"}
__proto__: Object
6:
abbr: "6"
name: {abbr: "NC", name: "North Carolina"}

That feeds my Component where I'm mapping the array to the dropdown:

<select value={state} onChange={handleStateChange}>
  <option value={''}>All</option>
    {activeStates.map((state) => (
  <option value={state.abbr}>{state.name}</option>))}
</select>

I'm trying to write a function that works off of activeStates to create a new array of only one of each state/abbreviation instead of producing duplicates. I know that because all of the values returned in that mapped array are considered unique I need to run an indexing function to get rid of the duplicates, but I'm not sure how.

So far I've used:

let statesObj = props.locations.reduce((acc, curr) => {
   acc[curr.address.state] = states[curr.address.state];
   return acc;
}, {});


  let uniqueStates = Object.entries(statesObj).map(([abbr, name]) => ({abbr, name }));

  let activeStates = props.locations.map(x => ({abbr: x.address.state, name: states[x.address.state]}));
  let uniqueStates = new Set(activeStates);
  let uniqueStatesArray = [...uniqueStates]

and

let activeStates = Array.from(new Set(props.locations.map(x => ({ abbr: x.address.state, name: states[x.address.state]})))

None of which have worked.

Answer 1

You are on the right track.

When adding objects to a Set it is by reference:

const s = new Set()
const o = { a: 1, b: 2 }

s.add(o)

console.log(s.has(o)) // true
console.log(s.has({ a: 1, b: 2 })) // false

This can lead to other effects you might not anticipate:

const s = new Set()
s.add({ a: 1, b: 2 })
s.add({ a: 1, b: 2 })
s.add({ a: 1, b: 2 })

console.log(s) // Set { { a: 1, b: 2 }, { a: 1, b: 2 }, { a: 1, b: 2 } }

To answer your question, you can use one of the object's properties to add to a set you use for checking:

const dropDuplicates = arr => {
  const seen = new Set()
  const result = []

  for (let obj of arr) {
    if (!seen.has(obj.abbr)) { // check if `abbr` has been seen
      result.push(obj) // if not, then add state to result
      seen.add(obj.abbr) // this state is now seen, don't add anymore
    }
  }

  return result
}

Answer 2

I ended up working it out by chaining a few mapping functions together with a filter like:

  let activeStates = props.locations.map(x => ({abbr: x.address.state, name: states[x.address.state]as string}));

  function getUnique(activeStates, comp) {

    const unique = activeStates
      .map(e => e[comp])
      // store the keys of the unique states
      .map((e, i, final) => final.indexOf(e) === i && i)
      // eliminate the duplicate keys and store unique states
      .filter(e => activeStates[e]).map(e => activeStates[e]);
     return unique;
  }

  let uniqueStates = getUnique(activeStates, 'abbr')

A bit of a roundabout but it ended up working and now all the options are mapping correctly. Thanks everyone for the great suggestions!