React中map方法箭头函数=>后()的作用及与{}的区别

这是JavaScript箭头函数的基础语法特性，和React本身无关，两种写法的区别如下：

• 箭头后用()包裹内容：属于隐式返回写法，括号内的表达式结果会直接作为函数返回值，不需要手动写return关键字。
  你代码里的(movie) => (<MovieCard movie={movie} />)，等价于下面的显式写法：

  (movie) => {
    return <MovieCard movie={movie} />
  }
  

• 箭头后用{}包裹内容：属于函数代码块写法，大括号内是完整的函数执行逻辑，不会自动返回任何值，默认返回undefined。
  你直接把()替换成{}之后，map的回调函数没有返回任何JSX元素，遍历生成的新数组全是undefined，React拿不到可渲染的组件节点，自然页面没有任何内容。

Array.map渲染列表时，要求回调函数必须返回每一项生成的React元素，两种合法写法如下：

1. 无额外逻辑时用隐式返回（就是你现在正常运行的写法，适合直接返回JSX的简单场景）

   {movies.map((movie) => (
     <MovieCard movie={movie} />
   ))}
   

2. 需要在遍历中加判断、数据处理等逻辑时，用大括号代码块，必须手动写return返回JSX

   {movies.map((movie) => {
     // 这里可以加任意业务逻辑，比如字段判空、数据格式化
     if (!movie.Poster) return null
     return <MovieCard movie={movie} />
   })}
   

补充提示：返回多行JSX时用括号包裹，是为了避免JavaScript自动分号插入（ASI）机制导致return后的值被截断，和组件return外层包括号是同一个原理。

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