javascript - ReactJS 的这段代码中的曲线括号有什么问题

Question

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

在箭头函数中加上花括号，输出[undefined]

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

箭头函数中没有花括号，输出Array[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?" .