我在 React 组件中有一个字典对象，我用它来与 API 响应进行比较，然后仅映射返回的地址状态。
然后，映射的地址状态用于动态填充用于"按州"筛选位置的<select>下拉列表中的选项。
我有一个单独的函数调用我的过滤器组件的父容器组件，该组件根据下拉选择加载所有过滤器和更新。我也把它包括在上下文中。
我遇到的问题是某些响应包含包含相同地址状态的多个位置。
现在我使用状态缩写作为唯一键，但显然这对重复项不起作用。
我尝试使用Set和Array.from但到目前为止还没有骰子。
我尝试的功能以及组件本身都在下面。任何想法都非常感谢！
当前组件：
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>
);
};
尝试使用Set和Array.from的方法：
这在最后一行返回一个错误，说：键入"Set<{ abbr：字符串;名称：任何;}>' 不是数组类型或字符串类型。
let activeStates = props.locations.map(x => ({abbr: x.address.state, name: states[x.address.state]}));
let uniqueStates = new Set(activeStates);
let uniqueStatesArray = [...uniqueStates]
这抛出了一个错误 遇到两个孩子使用相同的密钥：
let activeStates = Array.from(new Set(props.locations.map(x => ({ abbr: x.address.state, name: states[x.address.state]}))))
我用来映射的国家词典：
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"
};
如果某些嵌套属性相同，Set()无法确定唯一项。首先需要获取一组唯一的字符串值，然后将这些值映射到对象。您还可以通过创建一个对象来实现这一点，该对象以abbr作为键，name作为值，然后从该对象创建一个数组
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 }));state对象中是否有其他字段可以连接以创建唯一键？例如，这种name和abbr的组合是否是唯一的？
key={`${state.abbr},${state.name}`}