javascript 基于键替换数组中的对象并将其设置为

t3irkdon  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(116)

我有一个react状态变量

const [boxes,SetBoxes]=useState([]);

在执行一个操作后,我有一个盒子数组作为

boxes=[
    {
        "code": "756WP",
        "id": "full",
        "name": "Full Cart",
        "boxId": "box6",
        "cartQuantityAllots": [
            {
                "code": "5",
                "cartType": "halfCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Bar Cart - Beer & Wine",
                        "value": "Bar Cart - Beer & Wine",
                        "label": "Bar Cart - Beer & Wine"
                    }
                ]
            }
        ],
        "index": "Galley1",
        "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
    }
]

另一个数组将被添加到使用状态的数组框中

const obj=

    [{
        "code": "756WP",
        "id": "full",
        "name": "Full Cart",
        "boxId": "box6",
        "cartQuantityAllots": [
            {
                "code": "5",
                "cartType": "halfCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Bar Cart - Beer & Wine",
                        "value": "Bar Cart - Beer & Wine",
                        "label": "Bar Cart - Beer & Wine"
                    }
                ]
            },
            {
                "code": "4",
                "cartType": "halfCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Amenities Pouch",
                        "value": "Amenities Pouch",
                        "label": "Amenities Pouch"
                    }
                ]
            }
        ],
        "index": "Galley1",
        "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
    }]

因为boxes数组中的boxId键与obj数组中的boxId相同
是的

const i = boxes.findIndex(x => x.boxId === 'box6')

      boxes[i] = [ ...obj]
setBoxes([...boxes,...obj])

但是我最终得到了两个对象而不是一个在boxes数组中

const boxes=  [
        {
            "code": "756WP",
            "id": "full",
            "name": "Full Cart",
            "boxId": "box6",
            "cartQuantityAllots": [
                {
                    "code": "5",
                    "cartType": "halfCart",
                    "typesOfItems": [
                        {
                            "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                            "name": "Bar Cart - Beer & Wine",
                            "value": "Bar Cart - Beer & Wine",
                            "label": "Bar Cart - Beer & Wine"
                        }
                    ]
                }
            ],
            "index": "Galley1",
            "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
        },
        {
            "code": "756WP",
            "id": "full",
            "name": "Full Cart",
            "boxId": "box6",
            "cartQuantityAllots": [
                {
                    "code": "5",
                    "cartType": "halfCart",
                    "typesOfItems": [
                        {
                            "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                            "name": "Bar Cart - Beer & Wine",
                            "value": "Bar Cart - Beer & Wine",
                            "label": "Bar Cart - Beer & Wine"
                        }
                    ]
                },
                {
                    "code": "4",
                    "cartType": "halfCart",
                    "typesOfItems": [
                        {
                            "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                            "name": "Amenities Pouch",
                            "value": "Amenities Pouch",
                            "label": "Amenities Pouch"
                        }
                    ]
                }
            ],
            "index": "Galley1",
            "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
        }
    ]

我显然需要数组中的第二个对象,第一个不应该在那里,因为boxId与第二个www.example.com相同object.is,有更简单的方法吗?

wwodge7n

wwodge7n1#

您正在向boxes数组中添加一个新框,但需要更新内部数组。
因此,状态更新逻辑可以是这样的:

const obj = {
      code: "4",
      cartType: "halfCart",
      typesOfItems: [
        {
          key: "02f2c8e0-cd40-11ed-8563-092a964acecc",
          name: "Amenities Pouch",
          value: "Amenities Pouch",
          label: "Amenities Pouch"
        }
      ]
    };

    SetBoxes((boxes) =>
      boxes.map((b) =>
        b.boxId === "box6"
          ? { ...b, cartQuantityAllots: [...b.cartQuantityAllots, obj] }
          : b
      )
    );

相关问题