Next.js中调用API获响应后，data.map()无法渲染前端数据

问题根源及修复方案 #

1. 箭头函数未返回JSX元素

你的map回调使用大括号{}包裹逻辑，但没有显式返回JSX内容，导致每个循环迭代都返回undefined，自然不会渲染任何元素。

修复方式二选一：

• 去掉大括号，用箭头函数隐式返回：

  users.map((user) => (
    <div key={user.id} className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out">
      <img src={user.image} alt={user.firstName} className="w-full h-64 object-cover"/>        
      <h2 className="p-4">{user.firstName}</h2>      
    </div>
  ))
  

• 保留大括号，添加return语句：

  users.map((user) => {
    return (
      <div key={user.id} className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out">
        <img src={user.image} alt={user.firstName} className="w-full h-64 object-cover"/>        
        <h2 className="p-4">{user.firstName}</h2>      
      </div>
    )
  })
  

2. API返回数据结构不匹配

https://dummyjson.com/users的返回格式是包含users数组的对象（而非直接数组），你之前直接对data调用map，但data本身是{ users: [...] }结构，不存在map方法。另外你代码中写的data[0].urls.small完全不符合该接口的返回字段（用户数据里没有urls属性），若要展示图片，应使用接口返回的user.image字段。

3. 缺少唯一key属性

React循环渲染元素时，必须给每个元素添加唯一key属性，这是React优化渲染的必要条件（虽不会报错，但会触发控制台警告），建议用user.id作为唯一标识。

修正后的完整代码 #

async function getUsers(){
  const res = await fetch(`https://dummyjson.com/users`);
  const data = await res.json();
  return data.users; // 直接提取并返回users数组
}

export default async function Home() {
  const users = await getUsers();
 
  return (
    <div>
      <section className="py-20">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 mb-8">User List</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {users.map((user) => (
              <div key={user.id} className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out">
                <img src={user.image} alt={user.firstName} className="w-full h-64 object-cover"/>        
                <h2 className="p-4">{user.firstName} {user.lastName}</h2>      
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}

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