typeError：無法讀取未定義的屬性“map”（nextjs）

Question

我非常努力地尋找解決這個問題的方法，但我沒有找到任何東西，有人可以幫忙嗎？

我只想獲取這些數據。

typeError: 無法讀取未定義的屬性“map”-> 錯誤

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

他們所做的所有這些評論都令人困惑。 解決方案非常簡單，在您映射它們之前，請檢查它們是否存在？

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

一種或另一種方式是添加默認值

({ mods = []}) =>

但做第一個，更好

Answer 2

好吧，錯誤很簡單，基本上你得到的響應是一個json對象，一個普通的 json 對象。

話雖如此，基本上你不能映射一個對象或者好吧，你可以但不能使用地圖。

網址的響應是

{
    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>
))}

希望它有所幫助，並且您了解代碼的問題。

Answer 3

您在這里使用的網址

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

獲取數據返回對象，映射函數用於數組。

如果要使用該值，請刪除地圖並使用對象本身。

<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 中有 undefined 值，這意味着它是null ，並且不會觸發“isObject”錯誤。

Answer 6

我試圖在組件存檔中使用 getStaticProps，它需要在頁面中使用...謝謝大家。

NextJS 文檔