javascript - 使用 Next.js 在两个页面之间保留数据

Question

我想重构我的 Next.js webapp 让不同的页面处理不同的屏幕。目前，我有这个组件持有几个状态来知道我在哪个屏幕中。在 jsx 部分，我使用 {value && ... }渲染正确的组件。

但是我觉得这不是很好的设计，当屏幕越来越多时将无法维护。

我也想避免使用 Redux，因为它对我的项目来说太过分了。

我正在考虑将数据保存在 cookie 中，以便在呈现新页面时可以在每个组件中使用 getInitialProps 检索它们，但是有没有更优雅的方法？

我读过关于调整 _app.js但我不确定这样做的后果，以及它如何帮助我..

有什么建议吗？

Answer 1

当您的多个页面需要使用相同的数据时，您可以使用 Context 来存储结果。这是一种无需使用复杂且更自给自足的库(如 redux)即可进行集中存储的好方法

您可以在 _app.js 文件中实现上下文，该文件必须位于根文件夹中。这样 next.js 将其视为根包装器，您只需要使用 1 个 Context 实例

上下文/appContext

import React from 'react';
const AppContext = React.createContext();
export const AppProvider = AppContext.Provider;
export const AppConsumer = AppContext.Consumer;
export default AppContext;

_app.js

import React from 'react'
import App from 'next/app'
import AppProvider from '../contexts/appContext';
class MyApp extends App {
  state={
    data:[]
  }
  render() {
    const { Component, pageProps } = this.props;
    // You can implement logic in this component to fetch data and update state
    return (
      <div>
        <AppProvider value={this.state.data}> // pass on value to context
          <Component {...pageProps} />
        </AppProvider>
      </div>
    )
  }
}
export default MyApp

现在进一步每个组件可以通过使用 AppConsumer 或使用 useContext 来使用上下文值。如果你使用钩子(Hook)

请阅读更多关于如何使用 Context here