React Hooks обновляет вложенный массив JSON по индексу

Question

У меня есть этот JSON объект, и я хочу изменить атрибут внутри него. В этом случае я пытаюсь изменить VALUE внутри config [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
        }
      ]
    }
  ]
}

Любая помощь приветствуется

Answer 1

Попробуйте это:

newState = _.cloneDeep(editPaymentTool);
newState.configs[0].configs[0].value = newValue;
//more complicated nested updates
...
setEditPaymentTool(newState);