使用Next.js
如何将页面组件(例如页面A)的getInitialProps()中的fetch接收的一些数据传递给另一个页面组件(比如页面B)?当用户从A导航到第二页(页面B)时,我不希望再次发生提取。
尝试使用React Context的方法,其中来自页面组件的数据被发送到上下文提供程序,可以由页面B访问。但问题是如果用户直接导航到B,它没有在getInitialProps中获取的数据A的()
您可以使用NextJS设置设置Redux,如果商店使用getInitialProps()
存储相应的数据,则检查B的store.getState()
函数,并相应地执行获取。这也可以帮助您在从A到B导航然后在B上执行页面刷新的情况下维护数据。
设置Redux可能有点棘手,但this article基本上总结了它。
添加到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并在下一页中阅读。
最好的方法通常取决于您加密的数据量;以及您希望数据持续多长时间。