axios 为什么我在获取帖子列表时会变得未定义?

qybjjes1  于 2023-08-04  发布在  iOS
关注(0)|答案(2)|浏览(111)

我试图用nextjs和axios从jsonplaceholder中获取一个帖子列表。
这是我的ListOfPosts.jsx

import Link from "next/link";
import axios from "axios";

export default function ListOfPosts({posts}) {
    return(
        <div>
            {posts.map(post => (
                <div key={post.id}>
                    <Link href={`/posts/${post.id}`}>{post.body}</Link>
                </div>
            ))}
        </div>
    )
        
}

export const getStaticProps = async () => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
    const posts = response.data;
    return {
        props: {
            posts
        }
    }
}

字符串
这是我的posts/page.jsx

import ListOfPosts from "./ListOfPosts";

export default async function PostsPage({posts}) {
    return (
        <>
            <section>
                <ListOfPosts posts={posts}/>
            </section>
        </>
    )
}


我得到的错误是ListOfPosts.jsx中的cannot read properties of undefined (reading 'map')
我做错了什么,当试图获取职位与axios?

esbemjvw

esbemjvw1#

您不需要/app目录中的getStaticProps函数。

async function getData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    // The return value is *not* serialized
    // You can return Date, Map, Set, etc.

    // Recommendation: handle errors
    if (!res.ok) {
        // This will activate the closest `error.js` Error Boundary
        throw new Error('Failed to fetch data')
    }

    return res.json()
}

export default async function Page() {
    const data = await getData()

    return <main>{JSON.stringify(data, null, 2)}</main>
}

字符串

更多阅读:

9udxz4iz

9udxz4iz2#

getStaticProps只在页面上运行。
getStaticProps只能从页面导出。不能从非页面文件、_app、_document或_error导出。
这种限制的原因之一是React需要在页面呈现之前拥有所有必需的数据。
你可以在PostsPage中使用它,并将它作为prop传递给ListOfPosts
如果它在app目录中,则这些服务器端函数不会在app目录中运行。它只在pages目录下运行。

相关问题