我有这个JSON对象,我想改变它里面的一个属性。在这种情况下,我想改变里面的value configs[0].configs[0].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
}]
}]
}));
}
以及产生的输出,这与上面的预期有很大的不同。
{
"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);