Next.js - 页面没有让 GetServerSideProps 进入页面组件道具（使用自定义 _app.js）答案

【问题标题】：Next.js - Page not getting GetServerSideProps into Page component props (with custom _app.js)Next.js - 页面没有让 GetServerSideProps 进入页面组件道具（使用自定义 _app.js）
【发布时间】：2020-07-06 14:54:31
【问题描述】：

我一直在尝试将 GetServerSideProps 添加到我的 Next.js 应用程序中，但是在尝试这样做时，响应数据没有被注入到页面道具中。查看网络选项卡时，我看到pageName.json 生成，因此正在执行调用并获取数据，它只是没有作为道具进入页面。

这是我的页面组件.ts

import { useState } from "react";
import { url } from "../app/helpers/api/apiEnvs";
import { Button, Spin, Skeleton } from "antd";
import { MailOutlined, LoadingOutlined } from '@ant-design/icons';
import withLayout from "../app/components/Layout";
import './quotes.scss'

export const getServerSideProps = async (ctx) => {
const res = await fetch(`${url}/estimator/start`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
        });
    const estimator = await res.json();
    return {
        props: { estimator }
    };
};


const Quotes = (props: any) => {

    const [loading, setLoading] = useState(false);
    const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

    return (
        <div className="quotesContainer">
            <h1>Cotizador</h1>
            <div className="quoteBox quoteStepper">
            <MailOutlined/>
            </div>
            <div className="quoteBox quoteContent">
            {loading
                ? <Spin indicator={antIcon} />
            : <div>
                    <Skeleton.Input style={{ width: '300px' }} active={true} size="large" />
                    <p>{props.estimation ? props.estimation: 'No estimation'}</p>

                    <Skeleton.Button style={{ width: '90px' }} active={true} size="default" />
                    <Button type="primary">
                        Next
                    </Button>
              </div>
            }
            </div>
        </div>
    );
};

export default withLayout(Quotes);

自定义 _app.js 组件

import 'antd/dist/antd.css';

export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
}

network tab中显示的数据截图

会不会和有ts页面和.js _app有关？

【问题讨论】：

标签： javascript next.js

【解决方案1】：

看起来加载的道具不会通过您的 withLayout-wrapper。你可以发布你的 withLayout-wrapper 的内容吗？

我在使用 next-redux-wrapper 的 withRedux-wrapper 时遇到了同样的问题。包装器内部应该是一个静态异步 getInitialProps 函数，它的作用与 next 本身的默认 getInitialProps 相同：

async function appGetInitialProps({ Component, ctx}:AppContext): Promise<AppInitialProps> {
    const pageProps = await loadGetInitialProps(Component, ctx)
    return { pageProps }
}

next自带的loadGetInitialProps函数，可以从next/dist/next-server/lib/utils导入

【讨论】：

这里是withLayout组件import React from 'react';import Header from "./header";const withLayout = (Page: any) => { return () => ( <div> <Header/> <Page /> </div> ); };export default withLayout;
所以，我发现你是正确的，是。包装器，但我不知道如何使您的功能正常工作，所以也许我必须重构包装器。谢谢！

【解决方案2】：

所以，问题出在包装器上，

注意：在 _app.js 中使用布局组件（在我的例子中是在洞应用程序中）

【讨论】：

这是什么意思？
我不明白 :-(
您将在此处获得更多信息：github.com/vercel/next.js/discussions/15993

【解决方案3】：

尝试像这样更改 _app.js

  static async getInitialProps(appContext) {

    const appProps = await App.getInitialProps(appContext);

    if (!Object.keys(appProps.pageProps).length) {
      delete appProps.pageProps;
    }

    return appProps;
  }

如果 _app getInitialProps 返回的是空对象。 NextJs 将使用从 getServerSideProps 返回的 props（如果可用）

【讨论】：

【解决方案4】：

可能有自定义_app.js，您必须在其中调用getInitialProps。需要修改一下

static async getInitialProps({ Component, ctx }) {
     const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

    if (Object.keys(pageProps).length > 0) {
      // return pageProps only when its present
      return { pageProps }; 
    
    }
    return {};
  }

是的，您必须在 pageProps 存在时返回它。

【讨论】：