React中map箭头函数用{}与()的区别及适用场景

在React的map回调箭头函数里，你遇到的问题本质是箭头函数的两种语法规则差异：

核心区别 #

• 圆括号()：隐式返回
  箭头后用圆括号包裹内容时，不需要写return关键字，括号内的内容会直接作为函数的返回值。这是箭头函数的简写语法，专门用于函数体只有一行返回语句的场景。

• 花括号{}：显式代码块
  箭头后用花括号时，代表这是一个完整的函数代码块。此时函数默认返回undefined，如果需要返回值，必须手动添加return关键字。

结合你的代码分析 #

无法运行的代码（花括号版本） #

import React from 'react'
import { useState } from 'react'
import Star from './Star'

const StarRating = ({totalStars}) => {

  const [selectedStars, setSelectedStars] = useState(0)
  const starArray = arrayLenght => [...Array(arrayLenght)]
  console.log("totalStarts", totalStars)

  return (
    <>
      {starArray(totalStars).map((n, i) => {
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
        // 未写return，函数默认返回undefined
      })}
    </>
  )
}

export default StarRating

这段代码里，map的回调函数用了花括号，但没有手动返回<Star />组件，所以每次迭代都返回undefined，map最终生成的数组全是undefined，React自然不会渲染任何内容。

正常运行的代码（圆括号版本） #

import React from 'react'
import { useState } from 'react'
import Star from './Star'

const StarRating = ({totalStars}) => {

  const [selectedStars, setSelectedStars] = useState(0)
  const starArray = arrayLenght => [...Array(arrayLenght)]
  console.log("totalStarts", totalStars)

  return (
    <>
      {starArray(totalStars).map((n, i) => (
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
        // 圆括号自动隐式返回这个JSX元素
      ))}
    </>
  )
}

export default StarRating

换成圆括号后，<Star />组件被隐式返回，map生成了包含Star组件的数组，因此能正常渲染。

适用场景 #

• 用圆括号的场景：函数体只有一行代码，且需要直接返回结果时，比如返回单个JSX元素、简单表达式计算，用隐式返回更简洁。
  示例：

  const doubled = numbers.map(num => num * 2)
  const components = items.map(item => <Item key={item.id} data={item} />)
  

• 用花括号的场景：函数体需要多行代码、执行逻辑（比如变量处理、条件判断），或者需要根据不同情况返回不同内容时，必须用代码块并手动写return。
  示例：

  const processedItems = items.map(item => {
    const formattedDate = new Date(item.date).toLocaleString()
    if (item.status === 'active') {
      return <ActiveItem key={item.id} date={formattedDate} />
    } else {
      return <InactiveItem key={item.id} date={formattedDate} />
    }
  })
  

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