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

【问题标题】：Passing data between pages received via fetch in getInitialProps of a page component在页面组件的 getInitialProps 中通过 fetch 在接收到的页面之间传递数据
【发布时间】：2019-08-18 18:27:42
【问题描述】：

使用 Next.js

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

尝试了一种使用 React Context 的方法，其中来自页面组件的数据被发送到上下文提供者，页面 B 可以访问该提供者。但问题是如果用户直接导航到 B，则它没有数据原样取自 A 的 getInitialProps()

【问题讨论】：

你在使用 react-router v4 吗？
对不起应该更清楚。使用 Next.js

标签： reactjs next.js

【解决方案1】：

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

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

【讨论】：

【解决方案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 并在下一页中读取。

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

【讨论】：