Question

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

这是我的页面组件。

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有关吗？

Answer 1

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

我对next-redux-wrapper的withRedux-wrapper遇到了同样的问题。包装器内部应该是一个静态的异步getInitialProps函数，该函数的作用类似于下一个自身的默认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导入

Answer 2

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

注意：在_app.js内使用布局组件（在我的情况下是在Hole应用程序中）

Answer 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返回的道具（如果可用）

Answer 4

可能有自定义three_d = [ [[0, 0, 0], [1, 1, 1], [2, 2, 2]], [[0, 0, 0], [1, 1, 1], [2, 2, 2]], [[0, 0, 0], [1, 1, 1], [2, 2, 2]], [[0, 0, 0], [1, 1, 1], [2, 2, 2]], [[0, 0, 0], [1, 1, 1], [2, 2, 2]], ] result = shape(three_d) print(result) >>> (5, 3, 3)，您必须在其中调用_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 {}; }存在时，您才必须返回它。

Next.js-页面无法将GetServerSideProps放入Page组件属性（带有自定义_app.js）

4 个答案: