Javascript 使用spread将从API获得的对象添加到初始数据源中

我有一个初始数据源：

const initState = {
  columns: [
    {
      id: 'column-2',
      title: 'column-2',
      tabs: []
    }
  ],
  columnOrder: ['column-2']
};

一旦应用程序加载（这是我为自己构建的chrome扩展），我将从chrome中打开选项卡，并希望将它们作为一个新列添加到此数据源中

以下是我的尝试：

export default (state = initState, action) => {
  switch (action.type) {
    case TABS_LOAD:
      return {
        columns: [
          { id: 'chromeTabs', title: 'chromeTabs', tabs: action.payload },
          ...state.columns
        ],
        columnOrder: [{"chromeTabs"}, ...state.columnOrder]
      };

    default:
      return state;
  }
};

我希望通过上述函数创建一个如下所示的数据对象：

const state = {
 columns: [
 {
      id: 'chromeTabs,
      title: 'chromeTabs',
      tabs: 
[tab1,tab2,tab3,tab4]
    }, 
    {
      id: 'column-2',
      title: 'column-2',
      tabs: []
    }
  ],
  columnOrder: ['chromeTabs', 'column-2']
}
};

不幸的是，这对我不起作用。如果您有任何指示，我将不胜感激。

{“Chrometab”}

是一个语法错误。要添加到

columnOrder

数组中，只需使用

“Chrometab”

而不在其周围使用

{}

：

return {
  columns: [
    { id: 'chromeTabs', title: 'chromeTabs', tabs: action.payload },
    ...state.columns
  ],
  columnOrder: ["chromeTabs", ...state.columnOrder]
  // No {} -----^-----------^
};

实例：

const initState={
栏目：[
{
id:'第2列'，
标题：“第2列”，
选项卡：[]
}
],
columnOrder:['column-2']
};
const TABS_LOAD=“TABS LOAD”；
常量f=（状态=初始状态，操作）=>{
开关（动作类型）{
负载情况：
返回{
栏目：[
{id:'chrometab'，title:'chrometab'，tabs:action.payload}，
…状态栏
],
columnOrder:[“Chrometab”，…state.columnOrder]
};
违约：
返回状态；
}
};
log（f（initState，{type:TABS_LOAD}））
。作为控制台包装器{
最大高度：100%！重要；
}
您希望生成的redux状态是什么样子？“不幸的是，这对我不起作用…”以什么方式？始终引用您收到的任何错误消息等，或者您看到的与预期不匹配的行为。此外，我不相信
{“Chrometab”}
是任何类型的有效语法。谢谢，让我再深入挖掘一下，基于您的代码，我的也应该可以工作，但是，我的console.log向我显示了完全相同的结果。@ilteris-同样，
{“chromeTabs”}
其中的值是一个语法错误，因此包含该值的代码将永远不会运行（因为它根本无法被解析）。