通过页面组件的getInitialProps中的fetch接收的页面之间传递数据

问题描述 投票:0回答:2

使用Next.js

如何将页面组件(例如页面A)的getInitialProps()中的fetch接收的一些数据传递给另一个页面组件(比如页面B)?当用户从A导航到第二页(页面B)时,我不希望再次发生提取。


尝试使用React Context的方法,其中来自页面组件的数据被发送到上下文提供程序,可以由页面B访问。但问题是如果用户直接导航到B,它没有在getInitialProps中获取的数据A的()

reactjs next.js
2个回答
0
投票

您可以使用NextJS设置设置Redux,如果商店使用getInitialProps()存储相应的数据,则检查B的store.getState()函数,并相应地执行获取。这也可以帮助您在从A到B导航然后在B上执行页面刷新的情况下维护数据。

设置Redux可能有点棘手,但this article基本上总结了它。


0
投票

添加到Harshail Shah,您可以选择设置Redux以允许getInitialProps读取数据。但除此之外,您还可以尝试其他许多选项。他们每个人都有自己的优势和劣势,通常取决于你移动的数据量。

1.尝试伪闪存方法

在这种方法中,您使用cookie临时将数据存储在一个getInitialProps中,并在下一页中清除cookie。您可以使用的一个自动选择cookie(无论是客户端还是服务器端)的包是next-cookie所以,您的方法将是:

class Component1 extends React.Component {
    static async getInitialProps(ctx) {
        const isServer = !!ctx.req;
        // Set the cookie here. You can use next-cookie or ctx.req.cookie
    }
}

然后在第二个组件中,您将拥有:

class Component2 extends React.Component {
    static async getInitialProps(ctx) {
        const cookies = NextCookie(ctx);
        const desiredCookie = cookies['key_name'];

        // You can then delete the cookie here so that the data won't be available the next time
    }
}

2.加密数据并将其作为查询参数传递到下一页

在我看来,这是我们看到的很多长URL的原因。基本上这个想法是单击一个按钮,您将数据转换为base64字符串或使用非常快速的浏览器加密/解密器将数据作为查询参数附加到新URL并在下一页中阅读。

最好的方法通常取决于您加密的数据量;以及您希望数据持续多长时间。

© www.soinside.com 2019 - 2024. All rights reserved.