使用 Next.js 在两个页面之间持久化数据

Question

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

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

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

我正在考虑在 cookies 中保留数据，以便在呈现新页面时可以在每个组件中使用 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如果你使用钩子来使用上下文值

请在此处阅读有关如何使用上下文的更多信息