如何解决从getStaticProps返回的组件中获取未定义的props
我从getStaticProps返回了json响应,控制台将其记录在getStaticProps中,以验证正确的json响应。因此,提取工作正常,我从API得到正确的响应。
import Layout from '../components/layout';
import fetch from 'isomorphic-unfetch';
const Index = ({data}) => {
console.log(data)
return (
<Layout>
<div>
<h1>Welcome to Next Application</h1>
<h3>Users List</h3>
{data ?
data.map((item,i) => {
return (
<li key={i}>{item.name}</li>
)
}):
<span>Loading...</span>
}
</div>
</Layout>
);
}
export const getStaticProps = async () => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
const data = await response.json();
console.log(data);
return {
props:{
data
}
}
}
export default Index;
获取索引组件中未定义的数据。 我想念什么?
我的输出-https://ibb.co/Ns9143C Github-https://github.com/ho-dor/next-poc
解决方法
问题出在您的自定义应用程序文件中,如果您删除了自定义应用程序包装程序,问题将会解决,但是如果您想保留自定义应用程序包装程序,只需像这样更新_app.js
:
import App from 'next/app';
const MyApp = ({ Component,props }) => {
return (
<div className="MyApp">
<p>_app.js file</p>
<Component {...props} />
</div>
);
};
MyApp.getInitialProps = async (appContext) => {
// calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};
export default App;
有关更多信息,请点击此处:Custom App - NextJS
,您正在源代码中使用自定义_app组件。如果您使用的是自定义_app组件,则需要检查这些组件是否具有静态组件并手动触发。 这将在自定义应用程序组件本身中完成。
如果您不使用它,那么您将不会遇到任何问题。
您可以在我的自定义_app here中遵循我用于getInitialProps的方法
,
getStaticProps
(静态生成):在构建时获取数据。
也许您可以尝试重建应用程序以查看其是否有效。
,您还可以通过更新 getStaticProps 中的 return 语句来解决此问题。
return {
props: {
data: data.map(d => ({
id: d.id,title: d.title,body: d.body
}))
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。