Question

我通常从不在这里问任何问题，但我终其一生都无法弄清楚为什么这段代码不起作用。我浏览了无数的网站和 YouTube 视频，同样的片段似乎对他们有用。如果有人能引导我朝着正确的方向前进，我将不胜感激。

P.S，GetPosts 是我将在我的 nextJs 项目的索引页面上显示的组件。我知道如果我删除整个 posts.map() 内容并替换为一个简单的 helloWorld 文本，它会在浏览器中显示良好......所以问题应该出在我试图映射的任何内容上。我也试过为 api 使用另一个链接（一个来自 FakeJson api），但仍然是同样的问题。

Image: The Error

export default function GetPosts({posts}){
    return (
        <div>
            {posts.map((post) => {
                <div key={post.id}>
                    title: {post.title}
                </div>
            })}
        </div>
    );
}

export const getServerSideProps = async () => {
    const response = await fetch("http://localhost:3000/api/getPosts");
    const data = await response.json();
    return {
        props: {
            posts: data,
        }
    }
}

Answer 1

你需要找出错误所在：

在这一行之后：const data = await response.json(); 执行 console.log(data) 看看有没有数据。

在这一行：{posts.map((post) => { 在帖子后打一个问号。所以如果没有数据，它什么都不做。

{posts?.map((post) => {

这就是我处理 .map 问题的方式。

类型错误：无法读取未定义 NextJS

1 个答案: