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

【问题标题】：React Hooks update nested JSON array by indexReact Hooks 按索引更新嵌套的 JSON 数组
【发布时间】：2020-05-04 13:25:57
【问题描述】：

我有这个 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 中的代码 SOLUTION

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
        }
      ]
    }
  ]
}

感谢任何帮助

【问题讨论】：

您将函数定义传递给 setEditPaymentTool(prev => {...object})，您应该将对象传递给它。setEditPaymentTool({...object})
据我所知，这样做我得到了 EditPaymentTool 的预览状态并更新它。我关注了这个stackoverflow.com/questions/43040721/…
我明白了。我在这种情况下所做的是 newState = _.cloneDeep(prevState);然后进行我需要的必要更改，然后 setState(newState)。
成功了！！！非常感谢你（我是新的反应）。如果您将其写为答案，我会接受@Andi

标签： arrays json react-hooks setstate

【解决方案1】：

试试这个：

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

【讨论】：