React中使用ES6的对象扩展运算符返回一个map。

Question

为什么这个能够工作：

return elements.map((e)=> {return Object.assign({}, e, {selected:true})});

但是这个不行：

return elements.map((e)=> {...e, {selected: true}});

？

新手ES6 / Babel / React，求放过。

更新： 按照建议，迁移到此后：

return elements.map(e => ({...e, selected: true }));

收到这个错误： 尽管在项目的其他地方扩展操作是有效的：

        return [
            ...state,
            element(undefined, action)
        ]

- Guy

---

为什么第二个示例中没有return？ - Sebastian Simon

展开数组是ES6的一个特性，但展开对象是一个实验性的提议特性，因此您需要在Babel中启用它。 - loganfsmyth

Answer 1

箭头函数中隐式返回对象应该用括号包裹以便解释器知道它不是一个代码块。

因此，return elements.map(e => ({...e, selected: true }));

同时修复了selected属性的语法错误，即azium指出的错误。

详见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

你遇到的未预期标记错误可能是因为Babel不支持提案的对象展开。数组展开是ES6。像下面的答案一样使用插件将解决此问题。我喜欢包含对象展开的babel阶段0，因为您还可以获得其他很酷的功能，例如::绑定运算符。对象展开是阶段2，因此如果您不想包含阶段1和0，则也可以使用它。

https://babeljs.io/docs/plugins/preset-stage-0/

- Andy_D

---

由于某些原因，出现了意外的令牌（附在原问题上的图像）。 - Guy

@Andy_D：这是一个提案，不是ES7的一部分。 - Felix Kling

Answer 2

ES7规范中的对象剩余扩展转换在Babel中默认不支持。您需要使用一个插件来实现这个功能。

安装此插件的方法如下：

npm i babel-plugin-transform-object-rest-spread --save-dev

然后，将此添加到您的 .babelrc 文件中

{
  "plugins": ["transform-object-rest-spread"]
}

更多信息在这里

- Michael Parker

---

对象展开不是ES7的一部分（http://www.ecma-international.org/ecma-262/7.0/）。它是一个提案。 - Felix Kling