Question

使用Next.js

如何将某个页面组件（例如，页面A）的getInitialProps（）中的访存所接收的某些数据传递给另一个页面组件（例如，页面B）？我不希望当用户从A导航到第二页（B页）时再次发生获取操作。

尝试了一种使用React Context的方法，其中页面组件中的数据被发送到上下文提供者，可以由页面B进行访问。但是问题是，如果用户直接导航到B，它就没有数据了在A的getInitialProps（）中获取

Answer 1

您可以使用NextJS设置来设置Redux，并使用getInitialProps()来检查B的store.getState()函数是否具有相应的数据，并相应地执行提取。如果从A导航到B，然后在B上执行页面刷新，这也将帮助您维护数据。

设置Redux可能有些棘手，但是this article基本上可以总结一下。

Answer 2

除了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上，并在下一页中进行读取。

最佳方法通常取决于您要加密的数据量。以及您希望数据保留多长时间。

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

2 个答案: