[英]How to update value within an array in react state?
I am trying to update values within state array.我正在尝试更新 state 数组中的值。
Initial state values are like:初始 state 值如下:
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"
}
]
} ]);
I want to update value for array element 'type' set this from 'untrained to trained' by using 'id' element of array.我想更新数组元素“type”的值,通过使用数组的“id”元素将其从“未训练到训练”设置。
For Ex: On button click, I want to update 'type: trained' for 2nd array element where 'key = Check Number'.例如:单击按钮时,我想为第二个数组元素更新“type: trained”,其中“key = Check Number”。
My function for this is like below:我的 function 如下所示:
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;
}
}))
}
so, onClick={onClickHandler(1, 'Check Number')} where '1' is array id and 'Check Number' is value for 'key' element.因此,onClick={onClickHandler(1, 'Check Number')} 其中“1”是数组 ID,“Check Number”是“key”元素的值。
Final output should look like this:最终的 output 应该是这样的:
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"
}
]
} ]);
You need to unconditionally return from inside the mapper.您需要无条件地从映射器内部返回。 If the ID matches, return a new object, otherwise return the existing object.如果 ID 匹配,则返回一个新的 object,否则返回现有的 object。
You almost certainly don't need to use the callback version either, since this is a click handler.您几乎肯定也不需要使用回调版本,因为这是一个点击处理程序。
onClickHandler = (id, key) => {
setItemList(itemList.map(obj => obj.id !== id ? obj : ({
...obj,
items: obj.items.map(
item => item.key !== key ? item : { ...itm, type: 'trained' }
)
})));
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.