javascript - 数组内的多个嵌套展开运算符(javascript es2015)

Question

我正在使用 React/Redux 架构的 reducer。它与我的问题没有特别相关，因为这更像是一个 ES2015 问题。我有以下代码:

return objectAssign({}, state, {
        sendingRequest: false,
        currentModel: {
            ...state.currentModel,
            components: [
                ...state.currentModel.components,
                0: {
                    ...state.currentModel.components[0], // can't do this, why?
                    selectedComponentGroup: {
                        ...state.currentModel.components[0].selectedComponentGroup,
                        availableComponents: action.payload.data
                    }
                }
            ]
        }
    });

但是，ESLint 抛出错误:

✘  http://eslint.org/docs/rules/  Parsing error: Unexpected token  
C:\...\ProjectModelsReducer.js:122:25
...state.currentModel.components[action.componentIndex],

它特别提示这条线的传播运算符(operator):

...state.currentModel.components[action.componentIndex]

我不明白为什么这不起作用，我想知道是否有人可以阐明为什么不能在此处使用展开运算符。

Answer 1

components: [
    ...state.currentModel.components,
    0: {
        // ...
    }
]

无效，就像 [0: {}] 作为数组声明无效一样。如果你想创建一个改变了特定项目的新数组，你必须使用 spread 和正常的数组语法，或者克隆数组并稍后改变索引，例如

components: [
    {
        // ...
    },
    ...state.currentModel.components.slice(1),
]

创建一个替换第一项的新数组，或者做

components: Object.assign([...state.currentModel.components], {
    0: {
        // ...
    }
}),

克隆数组然后更改 0 索引处的项目。