如何在pageProps页面中设置Next.js属性？
如何在pageProps页面中设置Next.js属性？
提问于 2021-04-06 15:50:57
考虑到.../pages/_app.js，中下面的代码，组件是从当前页面导出的组件。
因此，假设您访问了.../pages/about.js，那么.../pages/about.js中导出的组件将是.../pages/_app.js中组件的值。
现在，当您控制台记录pageProps时，将显示一个空对象。
例如，我的问题是如何在.../pages/about.js中设置pageProps值。
.../pages/about.js
const About = () => {
return <p>About Page</p>
}
export default About.../pages/_app.js
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-06 16:35:02
如何在pageProps页面中设置Next.js属性
当您使用getStaticProps或getServerSideProps获取数据时，您传递的props可能是api调用中的数据。然后通过props将其传递给您的Page Component。该道具在pageProps中表示为_app.js。
在这里的代码中，您没有使用获取getStaticProps或getServerSideProps的数据，而是以props的形式从函数中传递返回值。所以您将获得空对象作为pageProps。
const About = () => {
return <p>About Page</p>
}
export default About下面的todos作为道具传递给Page Component。当您在console.log(pageProps)中使用_app.js时，您将得到api call result as pageProps
export default function IndexPage(props) {
return (
<div>
Todos list
<ul>
{props.todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
);
}
export async function getServerSideProps() {
const todos = await fetch(
"https://jsonplaceholder.typicode.com/todos"
).then((response) => response.json());
return {
props: { todos }
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66972049
复制相关文章
相似问题
腾讯云开发者
