Question

我正在开发一个 NextJS 应用程序，我正在尝试使用 NextJS 的内置 API 路由功能伪造后端 API 服务器。我在 src/pages/api/categories.js

中的数据

// in src/pages/api/categories.js
export default (_req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify({
        data: [
            { id: 1, title: "Category 1", imgUrl: "/demo-bg.jpg", url: "#" },
            // and so on
        ]
    }));
}

使用src/pages/categories.js中获取的数据的组件

// in src/pages/categories.js
function Categories({ categories }) {
    return (
        <section>
        {
             categories.map(({ id, title, imgUrl, url }) => {
                 return (
                     <div key={id}>
                         <div>{title}</div>
                     </div>
                 )
             })
        }
        </section>
    );
}

export async function getStaticProps() {
    const res = await fetch(`http://localhost:3000/api/categories`);
    const data = await res.json();
    const categories = data.data;

    if (!categories) {
        return { notFound: true }
    }

    return {
        props: { categories },
    }
}

export default Categories;

在运行我的服务器时，我遇到了运行时错误 TypeError: Cannot read property 'map' of undefined。传递给 categories 组件的 Categories 道具未定义。

但是当我从位于 http://localhost:8000/api/categories 的 Django REST 服务器获取 API 时返回相同的 JSON 格式，即 { "data": [ { "id": 1, "title": "Category 1", imgUrl: "/demo-bg.jpg", url: "#" } ] }，它工作正常。

我在这里做错了什么？任何帮助将不胜感激。

Answer 1

粗心大意。一定是我的错别字或愚蠢的错误。删除并重写整个组件解决了这个问题。

无法从 Next js Api Route 获取数据

1 个答案: