Question

我试图返回一个具有更新的tabs数组的新columns对象，并将该对象替换为我的数据源中现有的对象。这是相关的部分。在下面，使用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"]
};

返回过滤后的数组，然后使用扩展运算符替换现有项，这将按预期执行操作，仅对对象（因为键是唯一的）而不对数组起作用。

const obj = {
  cool: "is it cool ?"
};

console.log({ ...obj, cool: "definetly" });

使用传播运算符替换集合的对象

1 个答案: