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

Question

我想重构我的 Next.js 网络应用程序，让不同的页面处理不同的屏幕。目前，我让这个组件保持几个状态，以了解我在哪个屏幕中。在 jsx 部分，我使用 {value && ... } 来呈现正确的组件。

但我觉得这不是一个好的设计，并且在添加越来越多的屏幕时将无法维护。

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

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

我读过有关调整 _app.js 的内容，但我不确定是否理解这样做的后果，以及它如何帮助我..

有什么建议吗？

Answer 1

当您的多个页面需要使用相同的数据时，您可以使用上下文来存储结果。这是一种无需使用复杂且更自给自足的库（如 redux

）即可进行集中式存储的好方法

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

实例

contexts/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 如果您使用 hooks

来进一步利用上下文值

请详细了解如何使用Context here

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

Persist data between two pages with Next.js

javascript

reactjs

next.js

react-state-management