当我部署时收到此错误：“窗口”在服务器端渲染期间不可用

Question

我有一个组件正在使用

window

来计算屏幕的宽度，如下所示：

const CardComponent = () => {
  const [width, setWidth] = useState(window.innerWidth)

它工作正常，所有测试也在我的本地工作，但是当我使用 github 操作进行部署时，我收到此错误

无法为页面构建静态 HTML - 2.151s 服务器端渲染期间错误“窗口”不可用。

  148 |   149 | const CardComponent = () => {
> 150 |   const [width, setWidth] = useState(window.innerWidth)
      |                                      ^

我发现了这个问题，但我不知道如何使用它

Gatsby 构建失败 - 错误“窗口”在服务器端渲染期间不可用

Answer 1

您无法静态生成依赖于 window 的代码，因为 window 属性仅在浏览器中可用，并且生成发生在后端。换句话说 - 在您尝试访问 window.innerWidth 时不可能知道它的值。

将默认值设置为其他值 - 然后在组件安装客户端更新它。

Answer 2

我遇到了同样的问题，我试图使用 window.height/width 获取屏幕的大小，但我找到了替代方法：

import { useWindowSize } from '@uidotdev/usehooks';
const size = useWindowSize();
height = size.height;
width = size.width;

这里我使用了 useWindowSize() 钩子。 您可以通过在终端上运行以下命令来安装 usehooks :

npm i @uidotdev/usehooks