typeError：无法读取未定义的属性“地图”（nextjs）

Question

我非常努力地寻找解决这个问题的方法，但我没有找到任何东西，有人可以帮忙吗？

我只想获取这些数据。

typeError: Cannot read property 'map' of undefined -> 错误

import styles from '../styles/galery.module.css'
import Image from 'next/image'
import Link from 'next/link'
import photo from '../public/01.png'

export const getStaticProps = async () => {

    const response = await fetch('https://api.github.com/orgs/rocketseat');
    const data = await response.json();

    return {
        props: { mods: data }
    }
}

const ProjectLines = ({ mods }) => {
    return (
        <div className={styles.categoryWrapper}>
            <h4 className={styles.subTitle}>Escritório</h4>
            <div className={styles.lineWrapper}>
                <a className={styles.leftArrow}>&#10094;</a>
                <div className={styles.line}>
                    {mods.map(mod => (
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mod.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                    ))}
                </div>
                <a className={styles.rightArrow}>&#10095;</a>
            </div>
        </div>
    );
}
export default ProjectLines;

Answer 1

你所有的这些cmets所做的一切都令人困惑。解决方案非常简单，在您映射它们之前检查它们是否存在？

{mods && mods.map(.....

这是一种方法，另一种是添加默认值

({ mods = []}) =>

但是做第一个更好

Answer 2

我试图在组件存档中使用 getStaticProps，它需要在页面中使用...谢谢大家。

NextJS Documentation

Answer 3

您在此处使用的网址

(https://api.github.com/orgs/rocketseat)

获取数据作为返回对象，map函数用于数组。

如果您想使用该值，请移除地图并使用对象本身。

<div className={styles.line}>
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mods.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                </div>

只需更改此部分即可。

Answer 4

您正在获取数据并正确传递它，但不幸的是，它不是一个数组，而是一个对象。 .map 函数用于数组以遍历每个元素，几乎就像 forEach 但在这里它们被返回。

您需要做的是为Organizations 创建一个组件，该组件将从对象中获取道具，然后需要遍历组织数组，如果您愿意的话。

Answer 5

您需要为const ProjectLines的每个值添加验证

你现在有：

<div className={styles.line}>
                    {mods.map(mod => (
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mod.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                    ))}
                </div>

您需要实现（对于您使用的每个变量作为回报）：

{mods ? 
<div className={styles.line}>
                    {mods.map(mod => (
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mod.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                    ))}
</div>
: ''}

为什么会这样？因为使用getStaticProps。它是异步功能，请检查正确的文档。

同样适用于.map 函数。有人说 .map 可以用对象实现，即true。 ！但！你必须 console.log(typeof(mods))，我 90% 确定你有它作为 array 对象。在任何情况下，您在 mods 中有未定义的值，这意味着它是 null，并且不会触发“isObject”错误。

Answer 6

嗯，错误很简单，基本上你得到的响应是一个json 对象，一个普通的 json 对象。

话虽如此，基本上你不能映射一个对象或井，你可以但不能使用地图。

url的响应是

{
    login: "Rocketseat",
    id: 28929274,
    node_id: "MDEyOk9yZ2FuaXphdGlvbjI4OTI5Mjc0",
    url: "https://api.github.com/orgs/Rocketseat",
    repos_url: "https://api.github.com/orgs/Rocketseat/repos",
    events_url: "https://api.github.com/orgs/Rocketseat/events",
    hooks_url: "https://api.github.com/orgs/Rocketseat/hooks",
    issues_url: "https://api.github.com/orgs/Rocketseat/issues",
    members_url: "https://api.github.com/orgs/Rocketseat/members{/member}",
    public_members_url: "https://api.github.com/orgs/Rocketseat/public_members{/member}",
    avatar_url: "https://avatars.githubusercontent.com/u/28929274?v=4",
    description: "Plataforma de educação em tecnologia ?",
    name: "Rocketseat",
    company: null,
    blog: "https://rocketseat.com.br",
    location: null,
    email: "opensource@rocketseat.com.br",
    twitter_username: "rocketseat",
    is_verified: true,
    has_organization_projects: true,
    has_repository_projects: true,
    public_repos: 23,
    public_gists: 0,
    followers: 0,
    following: 0,
    html_url: "https://github.com/Rocketseat",
    created_at: "2017-05-24T16:16:47Z",
    updated_at: "2021-10-04T18:42:26Z",
    type: "Organization"
}

所以如果你想只显示我认为你想要的登录名，你需要这样做：

const ProjectLines = ({ mods }) => {
    return (
        <div className={styles.categoryWrapper}>
            <h4 className={styles.subTitle}>Escritório</h4>
            <div className={styles.lineWrapper}>
                <a className={styles.leftArrow}>&#10094;</a>
                <div className={styles.line}>
                    <div className={styles.imageBox}>
                        <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                        <div className={styles.linkContent}>
                            <span className={styles.name}>{mod.login}</span>
                            <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                        </div>
                    </div>
                </div>
                <a className={styles.rightArrow}>&#10095;</a>
            </div>
        </div>
    );
}

但如果你想遍历每个键，你应该这样做：

{Object.values(mods || {}).map(mod => (
    <div className={styles.imageBox}>
        <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
            <div className={styles.linkContent}>
                <span className={styles.name}>{mod}</span>
                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
            </div>
    </div>
))}

希望它对您有所帮助，并且您了解代码的问题。