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

Question

При попытке напрямую вернуть элемент, содержащий оператор распространения, я получаю ошибку разбора. Если я присваиваю его объекту перед его возвратом, ошибки синтаксического анализа не возникает. Я хотел бы знать, почему.

Когда я увидел точку ошибки разбора для оператора распространения, у меня появилось первое подозрение, что у меня не ES2018, но после некоторых экспериментов я обнаружил, что оператор распространения работает.

Первые 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)})

Мне просто любопытно, почему первый пример терпит неудачу.

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 подумал, что это блок кода, а в блоке кода . был проанализирован как 'десятичный' или 'средство доступа к экземпляру объекта'.

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

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

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

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