Next.js中使用getStaticProps获取数据后无法渲染JSX求助

问题描述 #

在Next.js项目中调用本地部署的Strapi API获取分类数据，控制台能成功打印出长度为4的categories数组，但通过map方法渲染<li>元素时，页面仅显示空列表。

相关代码 #

API请求函数（lib/staticApi.js） #

export async function requestQuery(query) {
  const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/${query}`)
  if (res.status !== 200) return [];
  const data = await res.json();
  return data;
}

页面文件（pages/index.js） #

import { requestQuery } from '../lib/staticApi.js';
import Sidebar from '../components/Sidebar.js'

export default function Home({ categories }) {
  return (
    <>
      <Sidebar categories={categories} />
    </>
  )
}

export async function getStaticProps() {
  const categoriesArray = await requestQuery('categories');
  return {
    props: {
      categories: categoriesArray.data
    }
  }
}

Sidebar组件（components/Sidebar.js） #

export default function Sidebar({ categories }) {
  console.group(categories) // 成功打印长度为4的数组
  return (
    <ul>
      {/* 尝试映射id但返回空列表 */}
      {categories.map((id) => {
        <li>{id}</li>
      })}
    </ul>
  )
}

问题原因及修复方案 #

核心问题：map回调未返回元素 #

在Sidebar组件的map方法中，你用花括号{}包裹回调逻辑，但没有显式返回<li>元素。箭头函数中，花括号代表代码块，必须通过return语句返回内容，否则默认返回undefined，导致没有元素被渲染。

修复后的Sidebar组件代码 #

export default function Sidebar({ categories }) {
  console.group(categories)
  return (
    <ul>
      {categories.map((category) => {
        // 注意：需根据Strapi返回的结构取对应字段，此处假设每个分类有id属性
        return <li key={category.id}>{category.id}</li>
      })}
    </ul>
  )
}

也可使用更简洁的写法（去掉花括号，箭头函数直接返回表达式）：

export default function Sidebar({ categories }) {
  console.group(categories)
  return (
    <ul>
      {categories.map((category) => (
        <li key={category.id}>{category.id}</li>
      ))}
    </ul>
  )
}

额外注意事项 #

• 必须给每个映射出的元素添加唯一的key属性，这是React列表渲染的强制要求，能避免性能问题和控制台警告。
• 若Strapi返回的分类包含其他需展示的字段（如name），可将{category.id}替换为{category.name}等对应字段。

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