DRF/NextJS调用分页API报错TypeError: p.map is not a function如何解决

DRF 内置分页序列化器的返回结构和未分页接口不同，未分页接口直接返回文章列表数组，分页接口默认返回的是嵌套对象，格式如下：

{
  "count": 总文章数,
  "next": 下一页接口地址（没有下一页则为null）,
  "previous": 上一页接口地址（没有上一页则为null）,
  "results": [/* 分页后的当前页文章数组 */]
}

你切换分页接口后，前端拿到的p不再是数组而是上述对象，对象本身没有map方法，就会触发p.map is not a function报错。

修改getStaticProps内的取值逻辑，从分页返回的对象中提取results字段（也就是实际的文章列表数组）再传给组件即可。如果后续需要做分页跳转功能，也可以把count、next、previous等分页元数据一起返回给前端使用。

仅需要调整getStaticProps部分的逻辑，组件渲染代码不需要改动：

export async function getStaticProps() {
  const res = await fetch("你的分页接口地址");
  const pageData  = await res.json();
  // 提取分页对象内的文章数组赋值给p
  const p = pageData.results;
  
  return{
    props: {
      p
      // 若后续要做分页功能，可同时返回元数据：
      // total: pageData.count,
      // nextPage: pageData.next,
      // prevPage: pageData.previous
    },
  };
};

遇到接口数据异常时，可以在getStaticProps中打印完整的接口返回值console.log(pageData)，查看Next.js服务端的控制台输出，就能明确接口返回的结构，快速定位字段取值错误问题。

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