[英]Using dictionary to map against an API response and create array of objects, trying to remove duplicates
我有一個 React 組件,我在其中使用字典來比較地址狀態的 API 響應,並僅映射作為下拉列表中的選項返回的狀態。
這是我用來創建返回狀態數組的映射函數:
let activeStates = props.locations.map(x => ({abbr: x.address.state, name: states[x.address.state]as string}));
對照我的字典,它看起來像這樣:
const states = {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
(all US states are included)
};
這會在響應中創建一個包含所有位置地址的數組,如下所示:
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"}
這為我將數組映射到下拉列表的組件提供了信息:
<select value={state} onChange={handleStateChange}>
<option value={''}>All</option>
{activeStates.map((state) => (
<option value={state.abbr}>{state.name}</option>))}
</select>
我正在嘗試編寫一個使用activeStates
的函數來創建每個狀態/縮寫中只有一個的新數組,而不是生成重復項。 我知道因為該映射數組中返回的所有值都被認為是唯一的,所以我需要運行一個索引函數來消除重復項,但我不確定如何。
到目前為止,我已經使用了:
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]
和
let activeStates = Array.from(new Set(props.locations.map(x => ({ abbr: x.address.state, name: states[x.address.state]})))
這些都沒有奏效。
你走在正確的軌道上。
將對象添加到 Set 時,它是通過引用:
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
這可能會導致您可能無法預料的其他影響:
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 } }
要回答您的問題,您可以使用對象的屬性之一添加到用於檢查的集合中:
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
}
我最終通過將一些映射函數與過濾器鏈接在一起來解決它,例如:
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')
有點迂回,但最終成功了,現在所有選項都正確映射。 謝謝大家的好建議!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.