Al devolver un objeto desde una función de flecha, parece que es necesario usar un conjunto adicional de {}y una returnpalabra clave debido a una ambigüedad en la gramática.

Eso significa que no puedo escribir p => {foo: "bar"}, pero tengo que escribir p => { return {foo: "bar"}; }.

Si la función devuelve flecha otra cosa que no sea un objeto, el {}y returnno son necesarios, por ejemplo: p => "foo".

p => {foo: "bar"}vuelve undefined.

Un p => {"foo": "bar"}lanzamiento modificado " SyntaxError: token inesperado: ' :'" .

¿Hay algo obvio que me estoy perdiendo?

Debe ajustar el objeto de retorno literal entre paréntesis. De lo contrario, se considerará que las llaves indican el cuerpo de la función. Los siguientes trabajos:

p => ({ foo: 'bar' });

No necesita incluir ninguna otra expresión entre paréntesis:

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

y así.

Referencia: MDN - Devolver literales de objeto

Quizás se pregunte por qué la sintaxis es válida (pero no funciona como se esperaba):

var func = p => { foo: "bar" }

Se debe a la sintaxis de la etiqueta de JavaScript :

Entonces, si transpila el código anterior a ES5, debería verse así:

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}

Si el cuerpo de la función de flecha está envuelto en llaves, no se devuelve implícitamente. Envuelva el objeto entre paréntesis. Se vería algo así.

p => ({ foo: 'bar' })

Al envolver el cuerpo en parens, la función volverá { foo: 'bar }.

Con suerte, eso resuelve tu problema. Si no, recientemente escribí un artículo sobre las funciones de Arrow que lo cubre con más detalle. Espero que le sea útil. Funciones de flecha de Javascript

las formas correctas

1. objeto de retorno normal

const getUser = user => {return { name: user.name, age: user.age };};

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

2. (expresiones js)

const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

explique

¡La misma respuesta se puede encontrar aquí!

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

Problema:

Cuando lo estás haciendo:

p => {foo: "bar"}

El intérprete de JavaScript cree que está abriendo un bloque de código de varias instrucciones, y en ese bloque, debe mencionar explícitamente una declaración de devolución.

Solución:

Si su expresión de función de flecha tiene una sola instrucción , puede usar la siguiente sintaxis:

p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})

Pero si desea tener varias declaraciones , puede usar la siguiente sintaxis:

p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}

En el ejemplo anterior, el primer conjunto de llaves abre un bloque de código de varias instrucciones, y el segundo conjunto de llaves es para objetos dinámicos. En el bloque de código de múltiples declaraciones de la función de flecha, debe usar explícitamente las declaraciones de retorno

Para obtener más detalles, consulte Mozilla Docs para las expresiones de la función de flecha JS

Siempre puede consultar esto para obtener más soluciones personalizadas:

x => ({}[x.name] = x);