返回值中的排列运算符错误，解析错误

Question

当试图直接返回包含排列运算符的项时，我会遇到解析错误。如果在返回之前将其分配给对象，则不会出现解析错误。我想知道为什么。

当我看到解析错误指向排列运算符时，我的第一个怀疑不是ES2018，但通过一些实验，我发现排列运算符正在工作。

第一个训练集就是这样定义的。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)})

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

Answer 1

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

Answer 2

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

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

你可以把这部分代码看作

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

此代码不正确。

因此，如果您需要在箭头函数中返回一个对象，则需要将其封装在括号():中

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

Answer 3

我猜在第一次尝试中，您打开了方括号{}，因此javascript认为它是一个代码块，而在代码块中，.被解析为"decimal"或"object instance property accessor"。

因此，如果你想用第一种风格编写代码，你可以做一些类似的事情

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

是的，你需要两对带有return的支架

在另外两次尝试中，您从赋值开始，这样js就知道您正在返回值。