对于我的电子商务应用程序要求之一，我有一个嵌套数组(示例):

const data = [
    {
        "id": 1,
        "group": "upper-wear",
        "labels": [
            {
                "type": "shirts",
                "quantity": "20",
            },
        ],
        popular: true
    },
    {
        "id": 2,
        "group": "bottom-wear",
        "lables": [
            {
                "type": "trousers",
                "quantity": "31",
            },
        ],
        popular: true
    },
]

对于这个数组，如果组值等于“upper-wear”，我需要将新对象插入到数组“labels”中。

const newDataToInsert = [
    {
      "type": 'blazers',
      "quantity": 19
    },
  ]

这是我到目前为止尝试过的，考虑到现在我只需要插入单个标签(即'upper-wear')(将来，可以有多个标签类别'upper-wear'，'bottom- wear', 被插入):

const updatedArray = data.map((datum) => {
    if (datum.group === 'upper-wear') {
      return {
        ...datum,
        labels: [...datum.labels, ...newDataToInsert]
      };
    }
  });
  
  console.log(updatedArray);

但似乎有一个愚蠢的问题我遗漏了，因为结果返回如下:

[
  {
    id: 1,
    group: 'upper-wear',
    labels: [ [Object], [Object] ],
    popular: true
  },
  undefined
]

我知道可能有更好的方法可用，但这是我目前认为的最低解决方案。

任何解决当前或任何更好解决方案的帮助将不胜感激。

最佳答案

试试这个

updatedArray = data.map((d) => {
    if (d.group && d.group === 'upper-wear') {
        return { ...d, labels: d.labels.concat(newDataToInsert) }
    } else {
        return d;
    }
})

const data = [
{
    "id": 1,
    "group": "upper-wear",
    "labels": [
        {
            "type": "shirts",
            "quantity": "20",
        },
    ],
    popular: true
},
{
    "id": 2,
    "group": "bottom-wear",
    "lables": [
        {
            "type": "trousers",
            "quantity": "31",
        },
    ],
    popular: true
},
];

const newDataToInsert = [
{
  "type": 'blazers',
  "quantity": 19
},
  ];

const updatedArray = data.map((d) => {
if (d.group && d.group === 'upper-wear') {
    return { ...d, labels: d.labels.concat(newDataToInsert) }
} else {
    return d;
}
});
  console.log(updatedArray)

解释

这里在映射数据时，我们检查条件

如果

• 如果匹配，我们将首先从变量 b 复制整个对象 return { ...b }
• 之后我们取另一个同名变量 lables return { ...d, labels: d.labels.concat(newDataToInsert) },根据JSON 默认性质，同名的新变量将保存最新值
• 这里在labels中，我们首先获取旧数据的副本，然后将其与newDataToInsert数组labels: d.labels.concat(newDataToInsert)合并，它将合并2数组并将它们存储在 JSON 中，名称为 labels

否则

• 否则我们只返回当前值 else { return d; }

https://stackoverflow.com/questions/71751692/