Next.js使用axios获取接口数据后map遍历及序列化报错问题求解

序列化错误修复 #

你遇到的序列化报错核心原因是：axios.get返回的响应对象中，接口实际返回的业务数据存储在.data属性下，直接从响应对象解构items无法拿到有效值，返回undefined就触发了Next.js的JSON序列化校验报错。

修正后的Index.js中getServerSideProps逻辑如下：

// Index.js 文件
import axios from 'axios';

export async function getServerSideProps() {
  const Base_URL = 'https://dev-api.fitnessfuel360.com/app/home';
  const response = await axios.get(Base_URL);
  // 加可选链+兜底空数组，避免接口异常时返回undefined
  const items = response?.data?.items || [];

  return {
    props: { items },
  };
}

动态组件渲染实现 #

按照作业要求，我们通过「组件映射表」的方式实现type匹配渲染，遇到无效type直接返回null即可，不会触发报错。

步骤1：定义组件映射表 #

提前把所有支持的type和对应组件做关联映射，后续新增组件只需要更新这个映射表即可：

// 可放在Index.js头部或单独的公共文件中
import ProductSection from './productSection';
// 其他支持的组件按需导入即可
// import BannerSection from './bannerSection';

const componentMap = {
  // key为接口返回的type字段值，value为对应组件
  'product_section': ProductSection,
  // 'banner_section': BannerSection
};

步骤2：页面层遍历渲染逻辑 #

在首页组件中遍历items，根据type匹配对应组件，无效type直接跳过渲染：

// Index.js 首页渲染逻辑
export default function Home({ items }) {
  return (
    <div>
      {items.map((item, index) => {
        const { type, data } = item || {};
        const RenderComponent = componentMap[type];
        // 匹配不到对应组件直接返回null，不会抛出错误
        if (!RenderComponent) return null;
        // 把data参数透传给对应组件
        return <RenderComponent key={index} {...data} />;
      })}
    </div>
  )
}

步骤3：调整组件参数接收 #

productSection.js直接接收透传的data参数即可，示例如下（如果接口返回的data内字段名不同，按需调整即可）：

// productSection.js 组件
export default function ProductSection({ products = [] }) {
  return (
    <div>
      {products.map((item) => (
        <h1 key={item.slug}>{item.slug}</h1>
      ))}
    </div>
  )
}

注意事项 #

• 列表遍历必须加key属性，避免React抛出性能警告
• 所有接口字段取值都建议加可选链+默认值兜底，避免接口字段缺失导致页面崩溃

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