React中使用map渲染电影数据到MovieCard组件无渲染内容问题求助

问题根因 #

你收到的array-callback-return警告已经直接指向问题核心：map方法要求回调函数必须返回值，你当前使用带花括号的箭头函数语法时，没有显式编写return语句，因此map最终返回的是全为undefined的数组，页面自然不会渲染对应内容。
你尝试用forEach无法解决的原因是：forEach方法本身没有返回值，向JSX模板中传入forEach的执行结果等于传入undefined，同样不会触发渲染。

修复方案 #

你可以选择以下任意一种写法修正代码：

方案1：使用箭头函数隐式返回（推荐） #

去掉箭头函数的花括号，直接返回组件，代码更简洁：

<div className="list">    
 {data.map(i => <MovieCard movie={i}/>)}
</div>

方案2：保留花括号，显式添加return语句 #

如果你的回调逻辑包含其他处理代码，需要保留花括号的话，手动添加return：

<div className="list">    
 {data.map(i => {
  // 这里可以写其他处理逻辑
  return <MovieCard movie={i}/>
 })}
</div>

额外优化建议 #

React列表渲染需要给每个列表项添加唯一的key属性，避免产生新的警告，你可以用电影数据的唯一标识（如imdbID、或者临时用索引）作为key：

{data.map((movie, index) => <MovieCard key={index} movie={movie}/>)}

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