javascript - ReferenceError:未使用 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 = []
}
推荐阅读
- java - 如何查看 application.properties 文件中的属性引用的位置?
- telegram - 在电报机器人中获取电话号码的聊天ID的方法
- css - 基于 React Native 的 FlexBasis
- git - Git Credential Manager 不断为 Azure Devops 生成 PAT
- infer.net - GaussianProductOp.ProductAverageConditional - has quality band Experimental which is less than the recommended quality band (Preview)
- sql - 复杂的 SQL 查询请求
- jenkins - 在 Jenkins 管道中运行时出现 sfdx 错误
- angular - 角度 6 中的搜索过滤器
- c - 关于函数声明中省略return语句的问题
- excel - 根据我们可能所在的前一个月过滤12个月前的数据,而无需手动输入开始和结束日期?