gpt4 book ai didi

javascript - 在从 getStaticProps 返回的组件中获取未定义的 Prop

转载 作者:行者123 更新时间:2023-12-04 12:10:04 24 4
gpt4 key购买 nike

我从 getStaticProps 返回了 json 响应,控制台将其记录在 getStaticProps 中以验证正确的 json 响应。所以, fetch 工作正常,我从 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

关于javascript - 在从 getStaticProps 返回的组件中获取未定义的 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63434733/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com