Next.js调用Strapi API返回3条数据仅渲染1条如何解决

问题原因 #

你遇到的渲染问题由两个基础语法错误导致：

1. map遍历未返回JSX元素
   你在categories.papers.map的回调函数中使用了大括号包裹代码，但没有写return语句，默认返回undefined，React不会渲染undefined类型的内容。你之前能看到1条数据属于代码缓存或局部写法错误导致的偶发现象。
2. 缺少列表渲染必填的key属性
   React渲染数组生成的元素时，要求每个项有唯一的key属性，否则会触发运行时警告，极端情况下会出现渲染错乱。
   你提到的Media_Upload[0]写法本身没有逻辑问题，只要每篇论文的Media_Upload数组至少有一个元素即可正常运行，建议加可选链做异常兼容，避免某篇论文没有上传资源时页面直接崩溃。

修复方案 #

把你Category组件中map部分的代码替换为以下写法即可正常渲染全部3条数据：

{categories.papers.map((cat) => (
  <div key={cat.id}>
    <Text>Paper Uploaded at: {cat.created_at} </Text>
    <Text>Paper name: {cat.name}</Text>
    <Link href={`http://localhost:1337${cat.PDF_link}`}>
      <a target="_blank" rel="noopener noreferrer">
        <Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open PDF</Button>
      </a>
    </Link>
    <Link href={`http://localhost:1337${cat.PDF_Answers_Link}`}>
      <a target="_blank" rel="noopener noreferrer">
        <Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open Paper Answers</Button>
      </a>
    </Link>
    <Text>File Format: {cat.Media_Upload?.[0]?.ext}</Text>
  </div>
))}

核心修改说明 #

• 将map回调的大括号{}改为小括号()，启用箭头函数隐式返回规则，直接返回JSX元素；如果你要保留大括号写法，需要在div标签前加return关键字。
• 给最外层div添加key={cat.id}，用论文的唯一id作为key值符合React列表渲染规范。
• 给Media_Upload[0].ext添加可选链操作符?.，就算某篇论文的Media_Upload为空也不会导致页面崩溃。

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