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

Posted 2023-02-22

【中文标题】使用 spread 将我从 API 获得的对象添加到我的初始数据源中

【英文标题】：Using spread to add an object that I get from API into my initial datasource

【发布时间】：2019-04-24 08:30:57

【问题描述】：

我确实有一个初始数据源：

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

;

不幸的是，这对我不起作用。我会很感激任何指示。

【问题讨论】：

你期望得到的 redux 状态是什么样的？

“很遗憾，这对我不起作用……” 以什么方式？始终引用您收到的任何错误消息等，或者您看到的与您预期不符的行为。

另外，我不相信"chromeTabs" 是任何类型的有效语法。

【参考方案1】：

"chromeTabs" 是语法错误。要添加到 columnOrder 数组，只需使用 "chromeTabs" 而不在其周围使用 ：

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

现场示例：

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

const TABS_LOAD = "tabs-load";

const f = (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;
  
;

console.log(f(initState, type: TABS_LOAD));

.as-console-wrapper 
  max-height: 100% !important;

【讨论】：

谢谢，让我再挖掘一下，根据你的代码，我的也应该可以工作，但是我的 console.log 显示了完全相同的结果。

@ilteris - 同样，"chromeTabs" 需要一个值是语法错误，因此包含它的代码永远不会运行（因为它根本无法解析）。