为何在React组件的map方法闭包中必须使用return？

嘿，我来帮你理清这个疑惑！你遇到的问题其实和ES6箭头函数的语法规则直接相关，虽然表面上是React渲染报错，但根源是JS函数返回值的处理逻辑。

核心原因：箭头函数的两种语法差异 #

ES6箭头函数有两种写法规则，直接决定了是否需要显式写return：

• 简洁体（无大括号）：当函数体只有一行表达式时，可以省略大括号和return，表达式的结果会自动作为函数的返回值。
• 块体（有大括号）：当你用大括号包裹函数体时，不管代码行数多少，都必须**显式写return**才能返回值，否则函数默认返回undefined。

结合你的代码分析 #

你最初的代码用了箭头函数的块体写法：

movies.map(movie => {
  <Movie title= {movie.title} poster={movie.poster}/>
})

这里的大括号{}告诉JS引擎这是一个函数块体，但你没有写return，所以每次迭代这个箭头函数都会返回undefined。而React需要map返回一个由JSX元素组成的数组来渲染列表，一堆undefined无法被React正常解析，自然就会编译报错。

两种正确的写法 #

1. 块体写法加显式return（也就是你后来成功的写法）：

movies.map(movie => {
  return <Movie title={movie.title} poster={movie.poster}/>
})

2. 简洁体写法省略大括号和return：

movies.map(movie => <Movie title={movie.title} poster={movie.poster}/>)

这种写法因为只有一行JSX表达式，所以可以省略大括号，JS会自动把这个JSX元素作为返回值。

另外补充个小细节：React列表渲染时，每个子元素最好加上唯一的key属性（比如用电影标题，确保唯一的话），避免React的控制台警告：

movies.map(movie => <Movie key={movie.title} title={movie.title} poster={movie.poster}/>)

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