返回值中的传播运算符错误，解析错误答案

【问题标题】：Spread operator error in return value, parse error返回值中的传播运算符错误，解析错误
【发布时间】：2020-02-21 23:14:24
【问题描述】：

当试图直接返回一个包含展开运算符的项目时，我得到一个解析错误。如果我在返回它之前将它分配给一个对象，则没有解析错误。我想知道为什么。

当我看到指向扩展运算符的解析错误时，我首先怀疑没有 ES2018，但通过一些实验我发现扩展运算符正在工作。

First WorkoutSets 就是这样定义的。 workoutSets: [ { id: 0, group: 0, repeat: 0, dist: 25, rest: 20, speed: "Easy", total: 0, notes: "" } ]

这显示了一个解析错误点... this.state.workoutSets.map( item => { ...item, repeat: e.target.value } )})

这成功了： this.state.workoutSets.map( item => item = { ...item, repeat: e.target.value } )})

这也成功了： this.state.workoutSets.map( item => item.group === 0 ? { ...item, repeat: e.target.value} : item)})

我只是好奇为什么第一个例子失败了。

【问题讨论】：

如果你打算做对象传播，并返回对象，你需要添加大括号() => ({})，以区别() => { return 0; }一个代码块。另见Arrow functions - returning object literals

【解决方案1】：

我猜你在第一次尝试时打开括号 {}，所以 javascript 认为它是一个代码块，而在代码块中 . 被解析为“十进制”或“对象实例属性访问器”。

因此，如果您想使用第一种样式编写代码，您可以执行类似的操作

set.map(item => {return{...item, foo: 'bar'}})

是的，您将需要两个带有return 的括号

在其他 2 次尝试中，您从分配开始，因此 js 明白您正在返回值。

【讨论】：

【解决方案2】：

您有一个解析错误，因为 javascript 将箭头 => 后的括号 {} 视为函数的主体。不作为返回对象。

item =>  { ...item, repeat: e.target.value }

你可以把这部分代码想象成

function (item) {
  ...item
  repeat: e.target.value
}

此代码不正确。

所以如果你需要在箭头函数中返回一个对象，你需要将它包裹在括号中()：

item => ({ ...item, repeat: e.target.value })

【讨论】：

谢谢，果然是解析器错误。我实际上可以做到这一点，它会成功：this.state.workoutSets.map( item => { return {...item, repeat: e.target.value}})}) 虽然这段代码只是一个实验。对我来说，实现是我的第三个示例，我在更改它之前检查我是否有正确的项目。再次感谢。

【解决方案3】：

map函数需要为每个元素返回一个值是WorkoutSets数组，第一个例子失败了，因为你刚刚做了一个分配，你没有返回任何东西。另一方面，第二个和第三个示例成功了，因为您返回了item

【讨论】：