为何带大括号的箭头函数返回undefined？React列表渲染为空？

问题1：两数相加的箭头函数返回undefined #

代码示例：

const add = (a, b) => {
  a + b
}

console.log(add(1, 2)) // 预期: 3, 实际: undefined

原因 #

箭头函数分两种语法：

• 单行表达式写法：无需{}，自动返回表达式结果
• 多行块级写法：加{}后必须显式用return指定返回值，否则默认返回undefined

你使用了块级语法{}，但没写return，所以函数没有返回值，最终得到undefined。

修复方案 #

任选一种即可：

• 去掉花括号，用单行表达式自动返回：

const add = (a, b) => a + b
console.log(add(1, 2)) // 3

• 保留花括号，添加显式return：

const add = (a, b) => {
  return a + b
}
console.log(add(1, 2)) // 3

问题2：React组件用map渲染列表始终为空 #

代码示例：

<ul>
  {list.map(item => {
    <li>
      <a href="{item.url}">{item.name}</a>
    </li>
  })}
</ul>

原因 #

核心问题和上面一致：箭头函数用了{}块级语法，但没有显式返回JSX元素。map需要回调返回元素来生成新数组，现在回调返回undefined，最终数组全是undefined，React不会渲染这些内容，所以列表为空。

另外代码里href="{item.url}"写法错误，应该去掉引号，写成href={item.url}，否则会把字符串"{item.url}"当作链接地址，而非变量值。

修复方案 #

任选一种即可：

• 去掉花括号，用圆括号包裹多行JSX自动返回（圆括号用于避免换行语法问题）：

<ul>
  {list.map(item => (
    <li key={item.id}> {/* React列表元素必须加唯一key属性 */}
      <a href={item.url}>{item.name}</a>
    </li>
  ))}
</ul>

• 保留花括号，添加显式return：

<ul>
  {list.map(item => {
    return (
      <li key={item.id}>
        <a href={item.url}>{item.name}</a>
      </li>
    )
  })}
</ul>

注意：务必给每个列表项添加key属性，这是React的规范要求，能避免渲染警告并提升性能。

内容的提问来源于stack exchange，提问作者CherryDT