Ao retornar um objeto de uma função de seta, parece que é necessário usar um conjunto extra de {}e uma returnpalavra - chave devido a uma ambiguidade na gramática.

Isso significa que não posso escrever p => {foo: "bar"}, mas tenho que escrever p => { return {foo: "bar"}; }.

Se a função da seta retorna algo diferente de um objeto, o {}e returnsão desnecessários, por exemplo: p => "foo".

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

Um modificado p => {"foo": "bar"}lança “ SyntaxError: token inesperado: ' :'” .

Há algo óbvio que estou perdendo?

Você deve agrupar o literal do objeto retornado entre parênteses. Caso contrário, os aparelhos encaracolados serão considerados para denotar o corpo da função. Os seguintes trabalhos:

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

Você não precisa colocar nenhuma outra expressão entre parênteses:

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

e assim por diante.

Referência: MDN - Retornando literais de objetos

Você pode se perguntar por que a sintaxe é válida (mas não está funcionando como o esperado):

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

É por causa da sintaxe do rótulo do JavaScript :

Portanto, se você transpilar o código acima para o ES5, ele deverá se parecer com:

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

Se o corpo da função de seta estiver entre chaves, ele não será retornado implicitamente. Coloque o objeto entre parênteses. Seria algo parecido com isto.

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

Ao envolver o corpo em parênteses, a função retornará { foo: 'bar }.

Felizmente, isso resolve seu problema. Caso contrário, recentemente escrevi um artigo sobre as funções do Arrow, que o aborda com mais detalhes. Espero que você ache útil. Funções de seta Javascript

os caminhos certos

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. (expressões js)

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

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

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

explicar

A mesma resposta pode ser encontrada aqui!

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

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

Questão:

Quando você está fazendo:

p => {foo: "bar"}

O intérprete JavaScript pensa que você está abrindo um bloco de código com várias instruções e, nesse bloco, é necessário mencionar explicitamente uma declaração de retorno.

Solução:

Se sua expressão de função de seta tiver uma única instrução , você poderá usar a seguinte sintaxe:

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

Mas se você quiser ter várias instruções , poderá usar a seguinte sintaxe:

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

No exemplo acima, o primeiro conjunto de chaves abre um bloco de código com várias instruções e o segundo conjunto de chaves é para objetos dinâmicos. No bloco de código de múltiplas instruções da função de seta, você deve usar explicitamente instruções de retorno

Para mais detalhes, consulte Mozilla Docs para expressões de função JS Arrow

Você sempre pode verificar isso para obter mais soluções personalizadas:

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