如何使用 NextJS 和 useContext 钩子跨页面保持状态？

Question

我的应用程序在 NextJS 上运行，我希望用户在我的 index.js 页面上生成的一些列表项在用户通过<Link>. 我决定我可以使用useContext钩子在全局级别跟踪状态，但我遇到的问题是 NextJS 应用程序似乎在每次我进行页面更改时都在刷新自己，从而使我的列表数组呈现空白。下面是我创建的 4 段主要代码，它们应该完成持久化状态：

在这里，我创建了一个自定义_app.js，ItemContext通过使用.Provider和添加来自我创建的另一个组件的值来包装我的页面，该组件被调用useItemState来处理项目处理程序和项目本身。

// _app.js

import useItemState from '../components/useItemState';
import ItemContext from '../components/ItemContext';

function MyApp({Component, pageProps}){
    const { items, addItem, deleteItem, updateItem  } = useItemState([]);

    return (
    <ItemContext.Provider value={{items, addItem, deleteItem, updateItem}}>
      <Component {...pageProps} />
    </ItemContext.Provider>
    )
}

  export default MyApp;

这是 ItemContext 组件，它包含初始 createContext

// ItemContext.js

const ItemContext = createContext(null)

export default ItemContext

在 Index.js 中，我从我的ItemContext文件中调用项和项处理程序，因为我使用自定义 _app.js 文件中的值包装了此页面，因此现在可以访问所有这些函数。在这个文件的最后，我有一个<Link>到results.js该页面应该沿着通过items在此文件中生成的值。

// index.js

export default function Index() {
  const { items, addItem, deleteItem, updateItem } = useContext(ItemContext)

// ...misc code here... //

return (
    <Layout>
// ...misc code here... //

      <ItemContext.Provider value={items}>
        <Link href='/results'>
          <a>Click Me</a>
        </Link>
      </ItemContext.Provider>
    </Layout>
  );
}

在 results.js 页面中，我引用了items来自 ItemContext 的内容，但当我的应用程序点击此页面时，NextJS 会刷新它并且我丢失了我的项目。

// results.js

export default function Results() {
    const { items } = useContext(ItemContext)
    return (
    <Layout>
        {items}
    <Link href='/'> Home </Link>
    </Layout>
    );
}

如前所述，我不确定如何防止 NextJS 在页面更改时刷新应用程序以保持我的状态。从关于自定义应用程序的 NextJS 文档中，它清楚地表明这是一个可能的功能：导航页面时保持状态

我不确定我是否没有通过使用组件来使用正确的路由形式，或者我的useContext逻辑是否混乱。我知道我的上下文肯定可以工作，因为我的 index.js 页面可以正常工作，并且我可以在应用程序自行刷新并被删除之前将项目记录到结果页面上的控制台一瞬间。任何帮助将不胜感激！