TypeError：无法读取未定义 NextJS 的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of undefined NextJSTypeError：无法读取未定义 NextJS 的属性“地图”
【发布时间】：2021-07-18 10:56:24
【问题描述】：

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

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,
        }
    }
}

【问题讨论】：

你能说明你是如何通过posts 进入你的GetPosts 组件的吗？听起来像驱动该道具的任何东西最初都是未定义的（即使您稍后可能会设置填充它）所以您会收到此错误
使用props.posts.map而不是posts.map，因为它是嵌套的
链接图像中的控制台输出显示 HTTP 500 错误。此错误与fetch("http://localhost:3000/api/getPosts") 调用有关吗？如果是，则未设置posts，因为调用失败...
更新：感谢您的回答。我发现出了什么问题。所以似乎 getServerSideProps 在组件中不起作用；因此，我的 GetPosts 组件没有收到道具，导致“未定义”问题
随意添加解决方案作为您自己问题的答案。

标签： javascript reactjs next.js

【解决方案1】：

你需要找出错误在哪里：

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

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

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

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

【讨论】：