Javascript扩展语法合并在对象中，但附加到数组中

Question

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

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

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

一切都是 hunkey dorey，state.result 中的 4 个项目与 data.catalog 中的 1 个项目合并，给我留下 4 个项目的返回值。问题是我想要一个项目数组，这给了我和具有 4 个包含项目的属性的对象。

如果我运行：

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

它给了我一个我想要的项目数组，但它不是合并它们，而是附加它们，所以我得到一个包含 5 个项目的数组(state.result 和 data.catalog 中项目的副本(。

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

Answer 1

您必须单独处理数组的合并

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

Answer 2

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

如何使用它，然后从中获取您想要的值Object.values(results)如果需要，您也可以.map()它。

我希望这有所帮助。