React数组映射渲染组件失败：可打印数组但无法map

核心问题在于**map回调函数没有返回JSX元素**：

你当前的map回调用大括号{}包裹，但没有显式返回内部的JSX结构，导致回调默认返回undefined，React无法渲染任何内容。

修复方案（二选一） #

方案1：添加显式return

{movies.map((item) => {
  // 添加return返回JSX
  return (
    <div key={item.id} className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
      <img src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
      <p>{item?.title}</p>
    </div>
  )
})}

方案2：使用小括号实现隐式返回

去掉大括号，改用小括号包裹JSX，React会自动返回括号内的内容：

{movies.map((item) => (
  <div key={item.id} className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
    <img src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
    <p>{item?.title}</p>
  </div>
))}

额外优化建议 #

• 给map生成的元素添加唯一key属性（比如item.id），避免React控制台警告，提升渲染性能。
• 可以添加加载状态处理，比如在movies为空时显示加载提示：

{movies.length === 0 ? (
  <p className="text-gray-300 m-4">加载中...</p>
) : (
  movies.map((item) => (
    // ... 渲染逻辑
  ))
)}

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