4

我从 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

4

3 回答 3

4

问题出在您的自定义应用程序文件中，如果您删除自定义应用程序包装器，您的问题将解决，但如果您想保留自定义应用程序包装器，只需_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;

有关更多信息，请在此处查看：自定义应用程序 - NextJS

于 2020-08-16T09:18:12.750 回答
2

getStaticProps（静态生成）：在构建时获取数据。

也许您可以尝试重建您的应用程序以查看它是否有效。

于 2020-08-16T08:56:27.513 回答
1

您在源代码中使用自定义 _app 组件。如果您使用自定义 _app 组件，则需要检查组件是否具有静态组件并手动触发。这将在自定义应用程序组件本身中完成。

如果您不使用它，那么您将不会遇到任何问题。

您可以在我的自定义_app中遵循我用于 getInitialProps 的这种方法

于 2020-08-16T10:18:05.963 回答