javascript - Django REST / NextJS 显示分页 api 的问题

问题描述

因此，我试图重做一个完全在 Django 中构建的个人博客站点，该站点使用模板系统和 DRF / Next.js 设置。问题是我可以在没有分页的 django 序列化器的页面上显示博客文章。当我对 django 序列化程序进行分页时，因为我只想要来自页面上的几篇文章，我得到了错误

TypeError：p.map 不是函数

这是有效的代码：

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React, { Component } from 'react'
import Header from '../components/header'
import Link from 'next/link';

function Home({ p }) {
  return (
    <React.Fragment>
      <Header />
      <header className="masthead">
            <div className="container position-relative px-4 px-lg-5">
                <div className="row gx-4 gx-lg-5 justify-content-center">
                    <div className="col-md-10 col-lg-8 col-xl-7">
                        <div className="site-heading">
                            <h1>test</h1>
                            <span className="subheading">Test subheading</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        {p.map((post) => (
        <div className="container px-4 px-lg-5" key={post.id}>
            <div className="row gx-4 gx-lg-5 justify-content-center">
                <div className="col-md-10 col-lg-8 col-xl-7">
                    <div className="post-preview">
                        <Link href={`/posts/${encodeURIComponent(post.slug)}`}>
                            <a><h2 className="post-title">{ post.title }</h2>
                            <h3 className="post-subtitle">{ post.article_body.substr(0,50)}</h3></a>
                        </Link>
                        <p className="post-meta">
                            Posted by { post.author } in { post.article_type }
                            on { post.date_posted }
                        </p>
                    </div>
                </div>
            </div>
        </div>
        ))}
        <div className='container'>
        <hr className="my-4" />
                    <div className="d-flex justify-content-end mb-4"><a className="btn btn-primary text-uppercase" href="/allposts">All Posts →&lt;/a></div>
                    </div>
    </React.Fragment>
  )
}

export async function getStaticProps() {
  const res = await fetch("https://www.api.com/api");
  const p  = await res.json();
  console.log

  return{
    props: {
      p
    },
  };
};

export default Home;

此代码显示数据库中的所有博客条目并且工作正常。

一旦我将 api 地址更改为分页版本，我就会收到错误消息：

TypeError：p.map 不是函数

这个 api 正在由 Django Rest Framework 序列化程序进行分页。

如果有人可以在这里帮助我，那就太好了。在过去的两天里，我一直在用头撞墙，试图弄清楚这一点。

标签： javascriptpythondjango-rest-frameworknext.js

javascript - Django REST / NextJS 显示分页 api 的问题 - TypeError: p.map is not a function

问题描述

解决方案

推荐阅读