Next.js 用于从 getStaticProps 加载道具的页面组件

Question

我有一个应该呈现列表的页面组件。列表内容是从 /pages/api/latest.js 加载的，并且在 getStaticProps 函数内，提取按预期工作。但是，将列表项发送到组件不起作用。

这是我的页面的简化版本：

export default function Index({ questions }) {
    return (
        <>
            {questions?.length && (
                <ol>
                    {questions.map((item) => (
                        <li key={item.id}>
                            {item.title}
                        </li>
                    ))}
                </ol>
            )}
        </>
    );
}

export async function getStaticProps() {
    const latestRequest = await fetch(`http://localhost:3000/api/latest`);
    const latest = await latestRequest.json();

    const questions = latest.latest;
    console.log(questions);

    //  Terminal console output:
    //  [{ id: 64, title: 'commodo auctor velit' }, { id: 6, title: 'dui. Suspendisse ac' }]

    return { props: { questions } };
}

控制台输出看起来不错。但是，问题列表不会传递给 Index 函数。我做错了什么？

Answer 1

你的道具设置有点错误。你需要为你传递的每个道具都有一个标识符。

改变

return { props: { questions } };

对此

return { props: { questions: questions } };

Answer 2

好的，我解决了 -- 我的 _app.js 页面有错字。

我有

export default function MyApp({ Component, PageProps }) {
   return <Component {...PageProps} />
}

而不是

export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
}

I.E. pageProps 被错误输入为 PageProps。

Next.js 用于从 getStaticProps 加载道具的页面组件

Next.js Page component for loading props from getStaticProps

next.js