我的应用程序在NextJS上运行，我希望用户在<Link>上访问我的results.js页面时，用户在index.js页面上生成的某些列表项保持状态。我决定可以使用useContext挂钩在全局级别上跟踪状态，但是我遇到的问题是，每次进行页面更改时，NextJS应用程序似乎都会刷新自身，这是我的清单数组为空。以下是我创建的应完成持久状态的4个主要代码：
在这里，我创建了一个自定义_app.js，以使用ItemContext并以我创建的另一个名为.Provider的组件来处理{项目处理程序和项目本身。
useItemState这是ItemContext组件，其中包含初始的// _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;
createContext在Index.js中，我从// ItemContext.js
const ItemContext = createContext(null)
export default ItemContext
文件中调用项目和项目处理程序，由于我用自定义_app.js文件中的值包装了此页面，因此我现在可以访问所有这些功能。在该文件的末尾，我有一个ItemContext到<Link>页面， 应该 应传递在此页面中生成的results.js值文件。
items在results.js页面中，我引用了ItemContext中的// 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>
);
}
，但是当我的应用程序访问此页面时，NextJS刷新该页面，并且丢失了我的项目。
items如前所述，我不确定如何防止NextJS在页面更改时刷新应用程序以保持我的状态。从有关custom app的NextJS文档中，它清楚地表明这是可能的功能：在浏览页面时保持状态
我不确定是否通过组件使用的路由形式不正确，或者我的// results.js
export default function Results() {
const { items } = useContext(ItemContext)
return (
<Layout>
{items}
<Link href='/'> Home </Link>
</Layout>
);
}
逻辑是否混乱。我知道我的上下文可以正常工作，因为我的index.js页面可以正常工作，并且可以在应用刷新并擦除之前立即将这些项目记录到结果页面的控制台中。任何帮助将不胜感激！