使用字典将返回的状态映射到选择下拉列表以进行过滤，产生重复项，我试图删除这些重复项并将唯一键附加到

Question

I have a dictionary object in a React component that I'm using to compare against an API response and then map only the address states that are returned.

The mapped address states are then used to dynamically populate the options on the <select> dropdown used for filtering locations 'by state'.

I have a separate function call out to the parent container component of my filter component that loads all the filters and updates depending on a dropdown selection. I've included that in as well for context.

The problem I'm running into is that certain responses contain multiple locations that contain the same address state.

Right now I'm using the state abbreviation as the unique key but obviously that doesn't work for duplicates.

I've tried using Set and Array.from but so far no dice.

My attempted functions are below as well as the component itself. Any ideas are hugely appreciated!

Current Component:

export const LocationFilterSection = (props: Props) => {
  const [state, setState] = useState<string>('');

  const handleStateChange = e => {
    setState(e.target.value);
    props.onFilterChange(statuses, state)
  };

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

return (
    <FilterContainer>
      <Container fluid={true}>
        <Row>
          <Col>
            <div>FILTER BY STATE</div>
            <select value={state} onChange={handleStateChange}>
            <option value={''}>All</option>
              {uniqueStates.map((state) => (
                <option value={state.abbr} key={state.abbr}>{state.name}</option>
              ))}
            </select>
          </Col>
        </Row>
      </Container>
    </FilterContainer>
  );
};

Attempted methods using Set and Array.from :

This comes back with an error on the last line saying: Type 'Set<{ abbr: string; name: any; }>' is not an array type or a string type.

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

And this throws an error Encountered two children with the same key:

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

Dictionary of States I'm using to map against:

const states = {
  AL: "Alabama",
  AK: "Alaska",
  AZ: "Arizona",
  AR: "Arkansas",
  CA: "California",
  CO: "Colorado",
  CT: "Connecticut",
  DE: "Delaware",
  FL: "Florida",
  GA: "Georgia",
  HI: "Hawaii",
  ID: "Idaho",
  IL: "Illinois",
  IN: "Indiana",
  IA: "Iowa",
  KS: "Kansas",
  KY: "Kentucky",
  LA: "Louisiana",
  ME: "Maine",
  MD: "Maryland",
  MA: "Massachusetts",
  MI: "Michigan",
  MN: "Minnesota",
  MS: "Mississippi",
  MO: "Missouri",
  MT: "Montana",
  NE: "Nebraska",
  NV: "Nevada",
  NH: "New Hampshire",
  NJ: "New Jersey",
  NM: "New Mexico",
  NY: "New York",
  NC: "North Carolina",
  ND: "North Dakota",
  OH: "Ohio",
  OK: "Oklahoma",
  OR: "Oregon",
  PW: "Palau",
  PA: "Pennsylvania",
  RI: "Rhode Island",
  SC: "South Carolina",
  SD: "South Dakota",
  TN: "Tennessee",
  TX: "Texas",
  UT: "Utah",
  VT: "Vermont",
  VA: "Virginia",
  WA: "Washington",
  WV: "West Virginia",
  WI: "Wisconsin",
  WY: "Wyoming"
};

Answer 1

Set() can't determine unique items if some nested property is same. You first need to get a set of unique string values and then map those values to your objects. You can also achieve this by creating an object with abbr as keys and name as values and then create an array from that object

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

Answer 2

Are there other fields within your state object that you could concatenate to create a unique key? For instance, will this combination of name and abbr be unique?

key={`${state.abbr},${state.name}`}