代码之家 › 专栏 › 技术社区 › orpheus

nextjs:如何将数据从一个页面发送到另一个页面的getInitialProps函数

next.js express reactjs node.js javascript

1

orpheus · 技术社区 · 7 年前

我正在尝试将数据从B页(登录)发送到A页(索引) getInitialProps 因为我需要A页的getInitProps的一个键来实际获取这些属性…

我目前正试图通过向自定义的快速路由发送一个POST请求来实现这一点,并使用该路由呈现页面服务器端,以便运行getInitialProps。但问题是,即使在构建服务器端,浏览器也不会呈现页面。

从登录页面发布请求(发生在客户端):

const headers = {'Content-type': 'application/json; charset=UTF-8'}
await fetch(`${getRootUrl()}/loadKey`, {method: "POST", body: JSON.stringify({key}), headers})

快递路线:

server.post('/loadKey', (req, res) => {
    // const {key} = req.body
    // console.log(key)
    next({dev}).render('/') //index page
})

密钥记录得很好,在终端中,nextjs表示正在构建索引页,并运行getInitialProps,但浏览器上什么也没有发生。没有重定向。

我试过用 express.redirect , express.render ,我尝试强制客户端重定向,但对于前两个,使用next.render时会发生相同的事情;构建页面,运行getInitialProps,但浏览器上不会发生重定向。当我使用link或router强制重定向时,index的getInitialProps将无法从post请求中获取密钥。

2 回复 | 直到 7 年前

1

2

MoHo 7 年前

试试这个

server.post('/loadKey', (req, res) => {
    const {key} = req.body
    // Do whatever you need to do
    const actualPage = '/'
    const queryParams = { key }
    next({dev}).render(req, res, actualPage, queryParams)
})

现在您应该可以访问 key 在索引页中按属性。

2

1

Obed Parlapiano 7 年前

您的方法只适用于服务器端呈现的页面(因为您需要使用 req )不适用于客户端。即使你让它工作一次,当你尝试导航到这条路线时,你的逻辑可能会中断,或者你的应用程序的一部分是SPA,然后在访问这个页面时刷新一些。

摘自NEXTJS文件:

对于初始页面加载,getInitialProps将仅在服务器上执行。只有通过链接组件或使用路由API导航到其他路由时,才会在客户端上执行getInitialProps。

我过去使用过的一些可能的解决方案:

将页面B作为组件实现,如果满足某个条件,则从页面A调用它。B页没有getInitialProps,但是A页有,而且似乎您需要从A页getInitialProps中了解一些内容,以便正确地呈现B页,那么为什么不使用单页呢?用户不会知道区别。
使用Redux或类似产品。您可以将道具的值存储在商店中,在全球范围内都可以使用,甚至可以使用getInitialProps。但是当心!把道具保存到商店之前试图访问B页。A页的getInitialProps在hoc之前运行。