Reactjs 如何在Nextjs布局中使用上下文挂钩
我正在用NextJS构建一个应用程序。我的应用程序显示帖子列表，用户可以从a-Z或Z-a中对列表进行排序，并显示每页特定数量的帖子（10、20等）。当用户单击帖子访问特定的帖子页面，然后返回主列表时，排序和分页首选项被重置，我使用cookies设法保留保留的值，但我想使用Reactjs 如何在Nextjs布局中使用上下文挂钩,reactjs,react-hooks,next.js,use-context,Reactjs,React Hooks,Next.js,Use Context,我正在用NextJS构建一个应用程序。我的应用程序显示帖子列表，用户可以从a-Z或Z-a中对列表进行排序，并显示每页特定数量的帖子（10、20等）。当用户单击帖子访问特定的帖子页面，然后返回主列表时，排序和分页首选项被重置，我使用cookies设法保留保留的值，但我想使用useContext（）。 对于这个应用程序，我有一个Layout.js文件，我认为这是插入我的提供者的正确位置，如下所示： import React, {useState} from 'react'; import Navba
useContext（）Layout.js提供者的正确位置，如下所示：
import React, {useState} from 'react';
import Navbar from './Navbar';
import Head from 'next/head';
import {SortingContext} from './UseContext';
const Layout = (props)=> {
const [value, setValue] = useState('hello');
return (<SortingContext.Provider value={{value, setValue}}>
<div>
<Head>
<title>MyApp</title>
</Head>
<Navbar/>
{props.children}
</div>
</SortingContext.Provider>
)};
和my UseContext.js：
import {createContext} from 'react';
export const SortingContext = createContext(null);
问题是您正试图从提供上下文的树的更高层使用上下文。现在，您的提供者位于布局中
，但是，您试图在布局的父级主页中使用它。因此，您可以做几件事，将您的提供商从主页
之外移到更高的位置，或者如果您想保持当前的结构，您可以执行以下操作：
const Home = () => {
const {value, setValue} = useContext(SortingContext);
return (
<Layout>
<SortingContext.Consumer>
{value =>
<div className='main_screen'>
<h1>{value}</h1>
</div>
{siteOptions && <Footer />}
}
</SortingContext.Consumer>
</Layout>
)
};
const Home=（）=>{
const{value，setValue}=useContext（SortingContext）；
返回(
{value=>
{value}
{siteOptions&&}
}
)
};
但是，我的建议可能是将其提升到更高的级别，您可以在应用程序级别使用它。我们可以查看上下文本身以及您在哪里使用上下文吗？如果你有一个代码沙盒，我会更新这个问题。希望你能帮上忙！我提供了一个更详细的答案，让我知道如果你需要更多的清晰度！我完全理解你的意思，但我没有包含nextjs的app.js文件。显然，我必须创建一个新的app.js页面才能完成我想要的。谢谢你告诉我正确的方向。这是正确的，但我认为这是有意义的，如果你有多个上下文，你可以把它们放在那里。
const Home = () => {
const {value, setValue} = useContext(SortingContext);
return (
<Layout>
<SortingContext.Consumer>
{value =>
<div className='main_screen'>
<h1>{value}</h1>
</div>
{siteOptions && <Footer />}
}
</SortingContext.Consumer>
</Layout>
)
};