Что с кривым кронштейном в этом коде ReactJS

Question

const timezone = {'a' : 1}; 
    const options = map(timezone, (val, key) => { 
     <option key={val} value={val}>{key}</option> 
    }); 
    console.log(options); // [undefined] 

С кривыми скобками в функции стрелки, она выводит [неопределенный]

const timezone = {'a' : 1}; 
    const options = map(timezone, (val, key) => 
     <option key={val} value={val}>{key}</option> 
    ); 
    console.log(options); // Array[1] 

Без кривых скобок в функции стрелки, он выводит массив [1 ].

Что произошло между двумя блоками кодов?

Answer 1

Первый пример не имеет возвращаемого значения, второй возвращает неявно, как функцию доступного синтаксиса функции стрелки.

Отрегулируйте первый пример так, что она возвращает:

const timezone = {'a' : 1}; 
const options = map(timezone, (val, key) => { 
    return <option key={val} value={val}>{key}</option> 
// ^^^^^^ 
}); 

Вы можете прочитать на arrow functions on MDN ...

// 1) with braces (no return): 
(param1, param2, …, paramN) => { statements } 

// 2) without braces (implicit return): 
(param1, param2, …, paramN) => expression 

// 3) equivalent to 2 (braces with return statement): 
(param1, param2, …, paramN) => { return expression; } 

Также посмотрите на "When should I use return in es6 Arrow Functions?".

Answer 2

Для функций массива вы можете опустить фигурные скобки, как вы это сделали во втором примере, если функция содержит только один оператор. Если вы это сделаете, функция неявно возвращает значение, которое этот оператор принимает значение.

Если вы не опустили фигурные скобки, этот неявный возврат не состоится, в результате чего в вашем примере будет возвращено значение undefined.

Read more about the semantics of arrow functions on MDN.

Answer 3

Ваш первый пример не возвращает ничего. Хотя кажется, что в вашем втором примере тоже нет, лямбда-функции, которые не имеют фигурных скобок и только один оператор, неявно возвращают результат оценки этого утверждения.

Эквивалентность и без распорки бы ...

const timezone = {'a' : 1}; 
const options = map(timezone, (val, key) => { 
    return (<option key={val} value={val}>{key}</option>); 
}); 
console.log(options); 

и ...

const timezone = {'a' : 1}; 
const options = map(timezone, (val, key) => 
    <option key={val} value={val}>{key}</option> 
); 
console.log(options);