我使用Next.js和页面路由器，我的应用程序的全局上下文有一些问题（使用react context）。我需要getServerSideProps并在全局上下文中设置服务器端函数的结果，以便在我的应用上全局使用返回值（在本例中，我使用getServerSideProps获取用户信息）。问题是，getServerSideProps只适用于next.js页面，而不适用于React Context Provider组件。我该如何解决这个问题？
yrefmtwq1#
你可以简单地使用props将数据从getServerSideProps发送到页面组件。然后从那里获取数据并将其传递给上下文提供程序。像这样：首先，我们必须在文件中创建一个上下文：
getServerSideProps
export const PostsContext = createContext([])
然后，我们将页面属性传递给上下文
const Page = ({ posts }) => { return ( <PostsContext.Provider value={posts}> ... </PostsContext.Provider> ) } export const getServerSideProps = async () => { const resp = await fetch("...") return { props: { posts: await resp.json() } } } export default Page
最后，我们可以在组件中使用数据：
const MyComponent = () => { const posts = useContext(PostsContext) ... }
如果你感到困惑或有问题，请随时提问。
1条答案
按热度按时间yrefmtwq1#
你可以简单地使用props将数据从
getServerSideProps发送到页面组件。然后从那里获取数据并将其传递给上下文提供程序。像这样：首先，我们必须在文件中创建一个上下文：
然后，我们将页面属性传递给上下文
最后，我们可以在组件中使用数据：
如果你感到困惑或有问题，请随时提问。