Javascript传播语法在对象中合并，但在数组中追加

Question

我有一个奇怪的情况。 我有2个对象： state.result是对象的数组，而data.catalogs是类似于state.result的对象的数组。

我想创建一个纯函数来返回合并的两个副本（在redux reducer中）。 如果我运行：

 {
    ...state,
    result: {...state.result, ...data.catalogs}
  }

一切都是亨基·多雷（hukey dorey），state.result中的4项与data.catalogs中的1项合并，使我的返回值为4项。 问题是我想要一个项目数组，这使我和具有4个包含项目的属性的对象。

如果我运行：

  {
    ...state,
    result: [...state.result, ...data.catalogs]
  }

它给了我想要的项目数组，但是没有合并它们，而是附加了它们，所以我得到了5个项目的数组（state.result和data.catalogs中该项目的重复项）。

为什么会发生这种情况，如何合并数组中的项目？

Answer 1

    {
    ...state,
    result: {...state.result, ...data.catalogs}
  }

如何使用它，然后使用Object.values(results)想要的值，也可以根据需要.map() 。

希望对您有所帮助。

Answer 2

您必须分别处理数组合并

const x = [{id: 1}, {id: 2, name: 'two'}, {}];
const y = [{name: 'one'}, {}, {id: 3, name: 'three'}];

const z = x.map((e, index) => Object.assign({}, {...e, ...y[index]}));

// z = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}]