[英]React Hooks update nested JSON array by index
我有這個 JSON object,我想更改其中的一個屬性。 在這種情況下,我試圖在configs[0].configs[0].value中更改 VALUE
{
"id": "PAY_TOOL_1",
"name": "PAY_TOOL_1",
"description": "PayTool1",
"state": "ENABLED",
"configs": [
{
"isDefaultConfig": null,
"id": "configId-1",
"name": "configId-1",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl",
"value": "http://localhost:7070/pay/payment/confirm/", <-- WANT TO CHANGE THIS
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl",
"value": "http://localhost:7070/pay/payment/cancel/",
"defaultValue": null,
"description": null,
"editable": true
}
]
},
{
"isDefaultConfig": null,
"id": "configId-2",
"name": "configId-2",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl2",
"value": "http://localhost:7070/pay/payment/confirm/22",
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl2",
"value": "http://localhost:7070/pay/payment/cancel/22",
"defaultValue": null,
"description": null,
"editable": true
}
]
}
]
}
這是遵循此解決方案的 REACT HOOKS 中的代碼
const [editPaymentTool, setEditPaymentTool] = useState(null);
function handleConfigurationInputs( configIndex, propertyIndex, configId, attributeName, attributeValue) {
console.log("CONFIG_INDEX: "+configIndex+" PROPERTY_INDEX: "+propertyIndex+" CONFIG ID: "+configId+ " NAME: "+attributeName+ " VALUE: "+attributeValue);
console.log(editPaymentTool);
setEditPaymentTool(prev => ({
...prev,
configs:[{
...prev.configs,
configs:[{
...prev.configs[configIndex].configs[propertyIndex],
value:attributeValue
}]
}]
}));
}
和生產的 output 與上面的預期完全不同
{
"id": "PAY_TOOL_1",
"name": "PAY_TOOL_1",
"description": "PayTool1",
"state": "ENABLED",
"configs": [
{
"0": {
"isDefaultConfig": null,
"id": "configId-1",
"name": "configId-1",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl",
"value": "http://localhost:7070/pay/payment/confirm/", <-- EXPECTED TO BE CHANGED BUT NOT
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl",
"value": "http://localhost:7070/pay/payment/cancel/",
"defaultValue": null,
"description": null,
"editable": true
}
]
},
"1": {
"isDefaultConfig": null,
"id": "configId-2",
"name": "configId-2",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl2",
"value": "http://localhost:7070/pay/payment/confirm/22",
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl2",
"value": "http://localhost:7070/pay/payment/cancel/22",
"defaultValue": null,
"description": null,
"editable": true
}
]
},
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl",
"value": "http://localhost:7070/pay/payment/confirm/l", <-- THE CHANGED VALUE IS PUT HERE (WRONG)
"defaultValue": null,
"description": null,
"editable": true
}
]
}
]
}
任何幫助表示贊賞
嘗試這個:
newState = _.cloneDeep(editPaymentTool);
newState.configs[0].configs[0].value = newValue;
//more complicated nested updates
...
setEditPaymentTool(newState);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.