Question

如何更新深层嵌套的对象数组 JavaScript

2022-10-23

305

javascript arrays nested javascript-objects

我有以下使用此信息的对象数组，我想用 value:a 更新对象数组而不直接改变它（我可以使用索引解决它，但我不想使用索引更新它）下面是我到目前为止尝试过的代码

ccategory.map((item) =>
          item.id === payload.id
            ? {
                ...item,
                categoryItems: item.categoryItems.map(
                  (catItem) => catItem.categoryItemID === payload.categoryItemID
// stuck here how should I update categorySubItems?
                ),
              }
            : item
        ),

const payload={
    "id": "4476c379-2c4f-4454-b59e-cae2f62fdfe2",
    "categorySubItemsID": "c2cba4d6-5635-4b5c-acf3-b93b4d435aa9",
    "categoryItemID": "fdb0e86b-a2d9-4029-8988-9f50121794d3",
    "value": "a"
}

MyJSON 看起来像这样

const category=[
    {
        "id": "4476c379-2c4f-4454-b59e-cae2f62fdfe2",
        "categoryName": "Car",
        "categoryFields": [
            {
                "name": "Car Name",
                "type": "text",
                "categoryID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
            },
            {
                "name": "Price",
                "type": "number",
                "categoryID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
            }
        ],
        "categoryItems": [
            {
                "categoryItemID": "fdb0e86b-a2d9-4029-8988-9f50121794d3",
                "categorySubItems": [
                    {
                        "categorySubItemsID": "c2cba4d6-5635-4b5c-acf3-b93b4d435aa9",
                        "value": "",
                        "label": "Car Name",
                        "type": "text",
                        "categoryLinkID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
                    },
                    {
                        "categorySubItemsID": "01d5e1e7-3927-42a6-ad05-7399a5895096",
                        "value": "",
                        "label": "Price",
                        "type": "number",
                        "categoryLinkID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
                    }
                ]
            },
            {
                "categoryItemID": "f13237d7-abfd-40d3-ae35-0b59ddf5734e",
                "categorySubItems": [
                    {
                        "categorySubItemsID": "2af389b9-03bc-41d3-86bb-8bf324ca3cb3",
                        "value": "",
                        "label": "Car Name",
                        "type": "text",
                        "categoryLinkID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
                    },
                    {
                        "categorySubItemsID": "934ef505-72bb-4d64-adf1-2aa5e928a539",
                        "value": "",
                        "label": "Price",
                        "type": "number",
                        "categoryLinkID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
                    }
                ]
            }
        ]
    },
    {
        "id": "9882b210-2d99-43a3-8aea-9f7d7c88eeda",
        "categoryName": "Bike",
        "categoryFields": [
            {
                "name": "Bike Name",
                "type": "text",
                "categoryID": "73bee24c-ef64-4798-bc37-5fe90cbc8de7"
            }
        ],
        "categoryItems": []
    }
]

Answer 1

在内部 .map() 中，如果 catItem.categoryItemID === payload.categoryItemID 匹配，则可以返回一个具有更新的 categorySubItems 的新对象，您可以通过映射 catItem.categorySubItems 创建新数组来更新该对象。映射子类别项目时，如果 categorySubItemsID 与 payload 对象中的 value 匹配，则可以返回一个新的更新对象，并将新 value 设置为 payload.value ，否则，您可以保留原始项目，例如：

ccategory.map((item) =>
  item.id === payload.id
    ? {
      ...item,
      categoryItems: item.categoryItems.map((catItem) =>
        catItem.categoryItemID === payload.categoryItemID
          ? {
            ...catItem, 
            categorySubItems: catItem.categorySubItems.map(subCatItem => 
              subCatItem.categorySubItemsID === payload.categorySubItemsID
                ? {...subCatItem, value: payload.value}
                : subCatItem
            )
          }
          : catItem
      ),
    }
    : item
),

如您所见，这可能会变得非常笨拙。这就是为什么使用 useImmer() 之类的方法通常很有用，它允许您以不可变的方式直接修改“草稿”状态值，同时保持状态更新可变。