[英]ReferenceError: window is not defined w/ useMedia() hook + next.js
因为我正在使用 next.js,所以我认为由于代码在服务器端而不是在客户端执行,我收到了“窗口未定义”错误。 我尝试使用 useLayoutEffect() 来等待页面呈现,但它仍然不起作用。 我能做些什么来改变下面的自定义 useMedia() 钩子来解决这个问题吗?
export default (queries, values, defaultValue) => {
const mediaQueryLists = queries.map(q => window.matchMedia(q));
const getValue = () => {
const index = mediaQueryLists.findIndex(mql => mql.matches);
return typeof values[index] !== "undefined" ? values[index] : defaultValue;
};
const [value, setValue] = useState(getValue);
useEffect(() => {
const handler = () => setValue(getValue);
mediaQueryLists.forEach(mql => mql.addListener(handler));
return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
}, []);
return value;
};
因为窗口没有按时安装,请尝试使用以下方法等待它:
let mediaQueryLists
if (typeof window !== 'undefined') {
mediaQueryLists = queries.map(q => window.matchMedia(q));
} else {
mediaQueryLists = []
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.