[英]how to toggle an array of objects using react useState hook
在我的反應應用程序中,我有多個類別,在每個類別下我有多個選項。 我正在嘗試編寫一個 function 來處理切換選擇。 例如:
const initialState=[{id: "fruit", items:["apple", "banana"]}, {id: "veggie", items:["cucumber"]}]
const [selectedItems, setSelectedItems] =useState(initialState)
如果我點擊香蕉,結果應該是:
[{id: "fruit", items:["apple"]}, {id: "veggie", items:["cucumber"]}]
如果我單擊另一個水果,例如桃子,結果應該是:
[{id: "fruit", items:["apple", "banana", "peach"]}, {id: "veggie", items:["cucumber"]}]
如果我點擊雞肉,結果應該是:
[{id: "fruit", items:["apple", "banana"]}, {id: "veggie", items:["cucumber"]}, {id: "meat", items: ["chicken"]}]
我有一個這樣的切換處理程序:
function toggle(changed: string, id: string) {
if (selectedItems.find((cat) => cat.id === id)) {
//toggle
} else {
setSelectedItems([
...selectedItems,
{ id: id, items: [changed] },
])
}
}
我在切換部分努力處理現有對象。 有什么幫助嗎? 謝謝。
function toggle(changed: string, id: string) {
if (selectedItems.find((cat) => cat.id === id)) {
const obj = selectedItems.find(x => x.id === id);
const itemsToProcess = obj.items
// exist, to remove
if(itemsToProcess.find(x => x === changed)){
setSelectedItems([
// things we don't touch
...selectedItems.filter(x => x.id !== id),
// filtered array
{id, items: [...itemsToProcess.filter(i => i !== changed)]}
])
}
// to add
else{
setSelectedItems([
...selectedItems.filter(x => x.id !== id),
{id, items: [...itemsToProcess, changed]}
])
}
} else {
setSelectedItems([
...selectedItems,
{ id: id, items: [changed] },
])
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.