Next.js调用Anilist GraphQL API时map遍历数据无法正常渲染问题

JSX遍历渲染无内容和接口请求、Apollo配置无关，核心错误是map遍历的回调函数没有返回JSX元素：你当前代码里medias.map的回调使用大括号包裹内部逻辑，但没有写return语句，导致每一次遍历的返回值都是undefined，自然不会渲染任何DOM节点——这也解释了为什么console.log(medias)能正常拿到数据，数据请求本身是完全正常的。

两种正确写法二选一即可：

• 写法1：将回调的大括号替换为小括号，小括号包裹的JSX会被自动作为返回值

{medias.map((value) => (
  <div key={value.id} className="card">
    <h3>
      {value.title.userPreferred}
    </h3>
    {/* 后续可直接在这里添加封面图渲染逻辑 <img src={value.coverImage.medium} alt={value.title.userPreferred} /> */}
  </div>
))}

• 写法2：保留大括号的写法，在回调内部手动return需要渲染的JSX

{medias.map((value) => {
  return (
    <div key={value.id} className="card">
      <h3>
        {value.title.userPreferred}
      </h3>
    </div>
  )
})}

为了避免极端场景下（比如接口返回结构异常、首次渲染data未初始化）出现读取undefined属性的报错，可以将取媒体数据的写法增加可选链和空值兜底：

const medias = data?.Page?.media || [];

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