React Hooks 按索引更新嵌套的 JSON 数组

Question

我有这个 JSON 对象，我想更改其中的一个属性。在这种情况下，我试图在 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
                }]
            }]
        }));
    }

产生的输出与上面的预期完全不同

{
  "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);

React Hooks 按索引更新嵌套的 JSON 数组

React Hooks update nested JSON array by index

arrays

json

setstate

react-hooks