我收到此错误:
错误:尝试从服务器调用 /vercel/path0/src/hooks/use-window.tsx 的默认导出,但它位于客户端上。无法从服务器调用客户端函数,它只能呈现为组件或传递给客户端组件的 props。
导航到“mydomain.com/login”等页面时
这是我的use-window.tsx文件:
"use client"
import { useState, useEffect } from "react";
type WindowSize = {
width: number | undefined;
height: number | undefined;
};
type WindowDimensions = {
windowSize: WindowSize;
isMobile: boolean;
isDesktop: boolean;
};
export default function useWindow(): WindowDimensions {
const [windowSize, setWindowSize] = useState<WindowSize>({
width: undefined,
height: undefined,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener("resize", handleResize);
handleResize();
return () => window.removeEventListener("resize", handleResize);
}, []);
const isMobile: boolean = typeof windowSize.width === "number" && windowSize.width < 768;
const isDesktop: boolean = typeof windowSize.width === "number" && windowSize.width >= 768;
return { windowSize, isMobile, isDesktop };
}
帮助我我做错了什么。
我认为
"use client"
在钩子中不起作用。useWindow
您应该在客户端组件中调用您的钩子,即。一个组件,其为"use client"
.像下面这样的东西会起作用: