我正在嘗試更新狀態陣列中的值。
初始狀態值如下：
const [itemList, setItemList] = useState([
{
"id": "0",
"items": [
{
"key": "Player name",
"value": "Sandy",
"type": "trained"
},
{
"key": "Player status",
"value": "status here",
"type": "untrained"
}
]
},
{
"id": "1",
"items": [
{
"key": "Check Number",
"value": "0027858403",
"type": "untrained"
},
{
"key": "Check Date",
"value": "01/22/2010",
"type": "trained"
}
]
} ]);
我想更新陣列元素“型別”的值，通過使用陣列的“id”元素將其從“未訓練到訓練”設定。
例如：單擊按鈕時，我想為“key = Check Number”的第二個陣列元素更新“type：trained”。
我的功能如下：
onClickHandler=(id, data)=>{
setItemList((prev)=>prev.map((item)=>{
if(item.id === id){
item.items.map((itm)=>{
if(itm.key === data){
return {...itm,type: 'trained'}
}
else{
return itm;
}
})
}
else{
return item;
}
}))
}
因此，onClick={onClickHandler(1, 'Check Number')} 其中 '1' 是陣列 id，'Check Number' 是 'key' 元素的值。
最終輸出應如下所示：
const [itemList, setItemList] = useState([
{
"id": "0",
"items": [
{
"key": "Player name",
"value": "Sandy",
"type": "trained"
},
{
"key": "Player status",
"value": "status here",
"type": "untrained"
}
]
},
{
"id": "1",
"items": [
{
"key": "Check Number",
"value": "0027858403",
"type": "trained"
},
{
"key": "Check Date",
"value": "01/22/2010",
"type": "trained"
}
]
} ]);
uj5u.com熱心網友回復：
您需要從映射器內部無條件回傳。如果 ID 匹配，則回傳一個新物件，否則回傳現有物件。
您幾乎肯定也不需要使用回呼版本，因為這是一個點擊處理程式。
onClickHandler = (id, key) => {
setItemList(itemList.map(obj => obj.id !== id ? obj : ({
...obj,
items: obj.items.map(
item => item.key !== key ? item : { ...itm, type: 'trained' }
)
})));
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/429546.html
標籤：javascript 数组 反应
上一篇：js正則運算式替換所有RGB顏色
下一篇：如何在反應中發送動態道具