0

在我的一个项目中，我需要通过从 REST API 请求中获取的数据来填充meta 关键字和meta 描述。
所以我使用该getServerSideProps函数来获取响应并将其传递给页面。
这是我的 getServerSideProps 函数

export async function getServerSideProps(context) {


    function makeParam() {
        let params = new URLSearchParams(context.params);
        let keysForDel = [];
        params.forEach((v, k) => {
            if (v === 'undefined')
                keysForDel.push(k)
        });
        keysForDel.forEach(k => {
            params.delete(k)
        });
        return params.toString()
    }

    let response = await axios.post(
        process.env.baseAddress + "getData.php",
        qs.stringify({
            data: "api/search/advance?" + makeParam()
        }),
        {
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            }
        })

    return {
        props: {
            dataFromServer: response.data,
            params: makeParam()
        },
    }
}

在开发模式（本地主机）下一切正常，但部署后，通过刷新页面Context 参数是一个空对象。
这个函数是写在有一个参数叫做城市的页面之一中，如下图所示
页面文件

我已经检查了getServerSideProps 道具空对象。正如安克里所说

您能否检查一下，您是否将 pageProps 传递给您的自定义组件？

这是我的Component标签，其中包含 pageProps。

<Layout>
    <Component {...pageProps} ref={current}/>
</Layout>
4

1 回答 1

0

首先使文件结构如下：

pages:
  city:
   [...slug].js

注：城市为文件夹！

现在你可以像这样得到第一个参数：

export async function getServerSideProps(context) {
 const slug = context?.query?.slug[0] || "";
 const req = await axios.post(`${url}?advance=${slug}`)
 // ... rest of the code 
}

现在如果 url 看起来像这样 => http://localhost:300/city/japan slug = japan

于 2022-02-20T09:16:38.943 回答