在从 getStaticProps 返回的组件中获取未定义的道具 [英] Getting props as undefined in component returned from getStaticProps

查看:36
本文介绍了在从 getStaticProps 返回的组件中获取未定义的道具的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经从 getStaticProps 返回了 json 响应,并且控制台将其记录在 getStaticProps 中以验证正确的 json 响应.所以,fetch 工作正常,我从 API 得到了正确的响应.

从'../components/layout'导入布局;从 'isomorphic-unfetch' 导入提取;const 索引 = ({数据}) =>{控制台日志(数据)返回 (<布局><div><h1>欢迎使用下一个应用程序</h1><h3>用户列表</h3>{数据 ?data.map((item, i) => {返回 (<li key={i}>{item.name}</li>)}):<span>加载中...</span>}

</布局>);}export const getStaticProps = async() =>{const response = await fetch(`https://jsonplaceholder.typicode.com/users`);const 数据 = 等待 response.json();控制台日志(数据);返回 {道具:{数据}}}导出默认索引;

在索引组件中获取未定义的数据.我错过了什么?

我的输出 - https://ibb.co/Ns9143CGithub - https://github.com/ho-dor/next-poc

解决方案

问题出在您的自定义应用程序文件中,如果您删除自定义应用程序包装器,您的问题将解决,但如果您想保留自定义应用程序包装器,只需更新您的 <代码>_app.js 像这样:

从'next/app'导入应用程序;const MyApp = ({ Component, props }) =>{返回 (

<p>_app.js 文件</p><组件{...道具}/>

);};MyApp.getInitialProps = async (appContext) =>{//调用页面的`getInitialProps`并填充`appProps.pageProps`const appProps = await App.getInitialProps(appContext);返回 { ...appProps };};导出默认应用程序;

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

I have returned json response from getStaticProps and console logged it in getStaticProps to verify correct json response. So, fetch is working fine and I am getting correct response from 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;

Getting data as undefined in Index component. What am I missing ?

My Output - https://ibb.co/Ns9143C Github - https://github.com/ho-dor/next-poc

解决方案

The problem is in your custom App file, if your remove your custom App wrapper your problem will solve but if you want to keep custom app wrapper just update your _app.js like this:

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;

For more info check here: Custom App - NextJS

这篇关于在从 getStaticProps 返回的组件中获取未定义的道具的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆