Ошибка оператора распространения в возвращаемом значении, ошибка синтаксического анализа

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

У вас есть ошибка синтаксического анализа, потому что javascript воспринимает скобки {} после стрелки =>как тело функции. Не как возвращаемый объект.

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

Вы можете думать об этой части кода как

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

Этот код неверен.

Поэтому, если вам нужно вернуть объект в стрелочной функции, вам нужно заключить его в круглые скобки ():

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

Answer 2

В map функция должна возвращать значение для каждого элемента. WorkoutSetsarray, первый пример не выполняется, потому что вы только что выполнили присвоение и ничего не вернули. с другой стороны, второй и третий примеры завершились успешно, потому что вы вернулиitem

Answer 3

Я думаю, что при первой попытке вы открываете скобки {} поэтому javascript подумал, что это блок кода, а в блоке кода . был проанализирован как "десятичное" или "средство доступа к свойству экземпляра объекта".

Итак, если вы хотите создать код с первым стилем, вы должны сделать что-то вроде

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

И да, вам понадобятся две пары скоб с return

В двух других попытках вы начали с присваивания, поэтому js понял, что вы возвращаете значение.