我使用的是Next.js 13和用户上下文,但它在_app. tsx之外不起作用。为什么会这样?
src>context>UserPositionContext.tsx
import { createContext, useContext, useState } from "react";
const UserPositionContext = createContext({});
export const useUserPosition = () => {
return useContext(UserPositionContext);
};
export const UserPositionProvider = ({ children }) => {
const [userPosition, setUserPosition] = useState(0);
return <UserPositionContext.Provider value={{ userPosition, setUserPosition }}>{children}</UserPositionContext.Provider>;
};
export default UserPositionProvider;
*src>pages>_app.tsx useContext可以读取,如果我在这里声明
import { ThemeProvider, DefaultTheme } from "styled-components";
import UserPositionProvider from "../context/UserPositionContext";
export default function App({ Component, pageProps }: AppProps) {
return (
<\>
<UserPositionProvider\>
<ThemeProvider theme={theme}\>
<Component {...pageProps} /\>
</ThemeProvider\>
</UserPositionProvider\>
</\>
);
}
*src>pages>user.tsx useContext在这里声明无法读取
import UserComponent from "@/components/organism/UserNav";
import { useRouter } from "next/router";
import UserPositionProvider from "../context/UserPositionContext";
type Props = {};
const User = ({}: Props) =\> {
if (typeof window !== "undefined") {
const router = useRouter();
router.push("/user/profile");
}
return (
<UserPositionProvider\>
<UserComponent /\>
</UserPositionProvider\>
);
};
export default User;
我试着在console.log上测试,如果将提供程序放在user.tsx文件中,错误消息“setUserPosition”未定义。但是如果我放回in _app.tsx,它就可以正常工作了。
1条答案
按热度按时间ryevplcw1#
_app.tsx
中导出的组件是所有页面的 Package 器。当您使用UserPositionProvider
将子组件 Package 在_app.tsx
中时,上下文将 Package 页面中呈现的每个组件。因此可以从这些页面的任何子组件访问它。但是如果您将它导入到
user
页面中并仅在那里初始化它,那么您只能从该页面的子组件访问它。因此,如果您只在用户组件中使用Context的提供程序,那么您将无法从不是user
页面组件的子组件访问它的属性。