使用扩展运算符替换集合的对象

Question

我试图返回一个更新的tabs数组的新列对象，并将此对象替换为我的数据源中的现有对象。这是相关部分。下面，使用spread，但是，它将我的对象添加到列的末尾。如何让它替换现有的列？谢谢！

newState = {
  columns: [
    { id: column.id, title: column.title, tabs: removedTabs },
    ...state.columns
  ],
    columnOrder: ["chromeTabs", ...state.columnOrder]
};  

codesandbox link

Answer 1

newState = {
  columns: [
    ...state.columns.filter(item => item.id !== column.id),
    { id: column.id, title: column.title, tabs: removedTabs }
  ],
    columnOrder: [...state.columnOrder.filter(item => item !== 'chromeTabs'), "chromeTabs"]
};

返回一个已过滤的数组和您的新项，应该按照您的预期进行操作，使用spread运算符替换仅对象上的现有项（因为键是唯一的）而不是数组。

const obj = {
  cool: "is it cool ?"
};

console.log({ ...obj, cool: "definetly" });